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

Question

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

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

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

代码如下：

 getImage(file) {

      let canvas = this.$refs.canvas;
      let context = canvas.getContext("2d");
      context.clearRect(0, 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,0,0,img.width,img.height,0,0,canvas.width, canvas.height);
          };

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

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

Answer 1

非常感谢您的评论，现在我明白了问题所在并且我使用了 createObjectURL，它工作得很好。谢谢！！

getImage(file) {
   let canvas = this.$refs.canvas;
   let context = canvas.getContext("2d");
   context.clearRect(0, 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,0,0,img.width,img.height,0,0,canvas.width,canvas.height
      );
   };
}

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

JavaScript img.onload() sometimes not firing (depending on device and file size)

javascript

firefox

canvas

onload

progressive-web-apps