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

代码如下

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()，但是都不太像我遇到的问题。

还请各位赐教。