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

Question

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

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

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

$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]);
}

现在我尝试使用JIC库压缩图像： https ： //github.com/brunobar79/JIC/blob/master/src/JIC.js

但是此库接受图像对象作为其参数，并将其作为压缩图像对象返回。 我似乎无法找到将$ scope.image文件对象转换为Image对象的方法。 我该怎么做呢？

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

Answer 1

您只需创建一个Image实例，并将其src设置为您的数据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