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

还请各位赐教。