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

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

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

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

Answer 1

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

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

然后，它只使用canvas元素来操作图像，生成新的数据网址，并创建新的Image实例，并将其src设置为数据网址。因此，当您获得压缩图像时，只需取src并使用atob将base64编码数据解码回二进制并创建Blob。您可以在大多数使用Blob的地方使用File，例如通过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

在JavaScript

1 个答案: