JavaScript img.onload() 有时不触发取决于设备和文件大小

如何解决JavaScript img.onload() 有时不触发取决于设备和文件大小

我正在从本地存储加载图片并将其放入空白画布（大小为 300x150）。奇怪的是，该代码在 Firefox 桌面上运行良好，但在 Firefox Android 上无法处理较大的图像。我什至尝试使用完全相同的图片 - 相同的结果：在 PC 上没问题，但在 Android 上画布保持空白。似乎在电话上，如果文件大于大约，则 onload()-Function 不会触发。 1.5 MB。

从控制台输出来看，在我看来它正在将数据正确写入 img.src，但 img.onload() 部分似乎根本没有触发。

我做错了什么？非常感谢提前！

代码如下：

 getimage(file) {

      let canvas = this.$refs.canvas;
      let context = canvas.getContext("2d");
      context.clearRect(0,canvas.width,canvas.height);
      console.log(canvas.width); // 300
      console.log(canvas.height); // 150

      var reader = new FileReader();
      if (reader && file) {
        reader.readAsDataURL(file);

        reader.onload = (event) => {
          var img = new Image();
          console.log(img);
          img.onload = () => {
            console.log("starting img.onload"); // fires only for small pics on android,but PC is fine
            console.log(img.width); // 
            console.log(img.height);  // 

            if (canvas.width < img.width && canvas.height != 0) {
              canvas.height = (img.height * canvas.width) / img.width;
            }
            context.drawImage(img,img.width,img.height,canvas.height);
          };

          img.onerror = function() {
            console.log("Image Failed!"); // never fired
          };

          img.src = event.target.result; // output seems correct
        };
      }
    },

解决方法

非常感谢评论，现在我明白了这个问题，我使用了 createObjectURL，它完美地工作。谢谢！！

getImage(file) {
   let canvas = this.$refs.canvas;
   let context = canvas.getContext("2d");
   context.clearRect(0,canvas.width,canvas.height);
   var url = URL.createObjectURL(file);
   var img = new Image();
   img.src = url;
   img.onload = () => {
      if (canvas.width < img.width && canvas.height != 0) {
         canvas.height = (img.height * canvas.width) / img.width;
      };
      context.drawImage(
         img,img.width,img.height,canvas.height
      );
   };
}