关于 getImageData()不能按预期获取到数据的疑惑

[zcf0508]

代码如下

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0, image.width, image.height);
  let imgData_obj = ctx.getImageData(0, 0, image.width, image.height);
  let imgData = imgData_obj.data
  // console.log(imgData) // 控制台打印是正常有数据的
  for (let i = 0; i < imgData.length; i += 4) {
    // 具体不写了
    // Q: 如果上面不打印，那么在第一次加载图片的时候，获取的数据全部为 0
    //    但是之后再进行同样操作的时候又是正常可以获取到的
    //    如果上面打印了，那么总是可以正常获取到
    //    再但是，如果我上面打印数据但是不打开浏览器的控制台，那么也是会出现获取不到数据的情况
  }
}
image.src = 'image_path'; // 访问没问题

我试过给 getImageData()加 setTimeout ，但是是一样的情况。

网上搜到的情况基本就 2 种观点，一个是图片跨域没获取到，但在我这里没有这个问题，二是要在 image.onlad 里 drawImage()和 getImageData()，但是都不太像我遇到的问题。

还请各位赐教。

[zcf0508]

增加一个信息，第二次操作换一张照片也是可以的，只有第一次会有这个情况

[forgcode]

动态的设置下 canvas 的 width 、height

[zcf0508]

@forgcode

canvas.width = image.width; // <--
canvas.height= image.height; // <--
ctx.drawImage(image, 0, 0, image.width, image.height);

加在了这里，一样有问题

[forgcode]

那就不知道了，width 、height 不设置好像默认 150 ，超出的图像内容就是 0 了！我本地测试了下没啥问题，浏览器 chrome 95.0.4638.69

[zcf0508]

@forgcode 我从 chrome41 到 95 都有几率出现这个问题🤕