在 JavaScript 中将 File 对象转换为 Image 对象

Question

所以我有一个网站（使用 AngularJS）让用户通过标签上传文件

<input type="file" ng-model="image" id="trigger" onchange="angular.element(this).scope().setFile(this)" accept="image/*">

当我在控制器中处理上传时，图像被存储为文件对象。这是我保存文件并设置变量以预览图像的方法

$scope.setFile = function (element) {
    $scope.image = element.files[0]; // This is my image as a File
    var reader = new FileReader();

    //This is for previewing the image
    reader.onload = function (event) {
        $scope.image_source = event.target.result;
        $scope.$apply();

    }
    reader.readAsDataURL(element.files[0]);
}

现在我正在尝试使用此处找到的 J-I-C 库压缩图像：https://github.com/brunobar79/J-I-C/blob/master/src/JIC.js

但是这个库接受一个图像对象作为它的参数，并将它作为一个压缩的图像对象返回。我似乎找不到将我的 $scope.image File 对象转换为 Image 对象的方法。我该怎么做呢？

我还需要将压缩的图像对象转换回文件，以便将其上传到我的 Azure 存储。

Answer 1

您只需要创建一个Image 实例，并将它的src 设置为您的data url。然后将其传递给 JIC：

var img = new Image();
img.src = $scope.image_source;
jic.compress(img,...)

然后它只使用一个canvas 元素来操作图像，生成一个新的数据url，并创建一个新的Image 实例，将其src 设置为数据url。因此，当您取回压缩图像时，只需获取src 并使用atob 将base64 编码数据解码回二进制并创建Blob。您可以在大多数使用File 的地方使用Blob，例如通过ajax 上传。

var newImg = jic.compress(oldImg,...);
//replace 'image/png' with the proper image mime type
var base64data = newImg.src.replace("data:image/png;base64,","");
var bs = atob(base64data);
var buffer = new ArrayBuffer(bs.length);
var ba = new Uint8Array(buffer);
for (var i = 0; i < bs.length; i++) {
    ba[i] = bs.charCodeAt(i);
}
var blob = new Blob([ba],{type:"image/png"});
//now use blob like you would any other File object