在大图像上调用 readAsDataURL 后不调用文件图像加载

Question

我正在尝试读取图像文件并调整大小并将其上传到 Android 上的 Ionic2。我的代码适用于小尺寸图像，但对于超过 3MB 的图像，永远不会调用 onloaded 函数。

我非常感谢任何有关原因的帮助或见解。

makeFileIntoBlob(_imagePath) {


    return new Promise((resolve, reject) => {
        window.resolveLocalFileSystemURL( _imagePath, fileEntry => {

            fileEntry.file(file => {

                var reader = new FileReader();

                console.log('Reading the file!');

                reader.onloadend = (e: any) => {

                    var img = document.createElement("img");


                    img.onload = () => {
                        //---> Only get here for small images!
                        var resizedImg =  this.imgResizerSrvc.resize(img, 480, 480);
                        var imgBlob: any = this.dataURLtoBlob(resizedImg);
                        imgBlob.name = 'sample.jpg';
                        console.log('makeFileIntoBlob resolved!');
                        resolve(imgBlob);
                    }

                    //Will trigger img.onloadend
                    alert("about to trigger");
                    img.src = e.target.result;  //----> This call only triggeres reader.onloadend for small images
                    alert("Done trigger");

                };

                reader.readAsDataURL(file);

            });
        });
    });

}

作为替代方案，我也尝试使用以下方法读取文件：

img.src = (window.URL ? URL : window.webkitURL).createObjectURL( file );

或

img.src = (window.URL || window.webkitURL || window || {}).createObjectURL( file );

但这些都不会触发 img.onloaded()。

Answer 1

data URI 的 .length 可能存在限制

长度限制

虽然 Firefox 本质上支持数据 URI 长度不限，浏览器不需要支持任何特定的 数据的最大长度。例如，Opera 11 浏览器限制数据 URI 长度约为 65000 个字符。

您可以使用URL.createObjectURL() 调用file，而不使用FileReader()，将.imgResizerSrvc.resize 创建的Blob 传递给File()，以设置创建File 对象的.name。

makeFileIntoBlob(_imagePath) {

  return new Promise((resolve, reject) => {
    window.resolveLocalFileSystemURL(_imagePath, fileEntry => {

      fileEntry.file(file => {

        var component = /* reference to ionic2 component */ ;

        var img = document.createElement("img");

        img.onload = () => {

          var resizedImg = component.imgResizerSrvc.resize(this, 480, 480);
          var imgBlob = new File([resizedImg], "sample.jpg", {
            type: "image/jpeg"
          });
          resolve(imgBlob);

        };

        img.src = URL.createObjectURL(file);
      });
    });
  });
}