基于 Chromium 的浏览器上返回的 canvas.getimagedata（） 值不一致

问：

编辑：解决方案是（奇怪地）激活 willReadFrequently： true 在画布上，Chromium 和 getImageData（） 将返回一致的值，请参阅下面的答案。

我目前正在运行一个程序，该程序从之前加载图像的画布中选取一个像素，分析像素中的RGB值，然后根据蓝色和红色值运行计算。canvas.getImageData()

我只在 Chrome/Chromium/Edge 浏览器上遇到了一个奇怪的行为：第一次加载图像时，为特定像素返回的值是，如果我在画布中再次加载完全相同的图像并多次选择完全相同的像素，我现在得到。RGB(181,1,1)canvas.drawImage()canvas.getImageData()RGB(181,1,2)

HTML格式：

<canvas id="canvas" width="500" height="500"></canvas>

JS：

var ctx = document.getElementById("canvas").getContext("2d", {alpha: false,});
    
const IMG = new Image();
IMG.src = "myImage.jpg"

ctx.drawImage(IMG, 0, 0, 500, 500);
console.log("first image draw : " + ctx.getImageData(66, 27, 1, 1).data);

ctx.drawImage(IMG, 0, 0, 500, 500);
console.log("Second image draw : " + ctx.getImageData(66, 27, 1, 1).data);

ctx.drawImage(IMG, 0, 0, 500, 500);
console.log("Third image draw : " + ctx.getImageData(66, 27, 1, 1).data);

ctx.drawImage(IMG, 0, 0, 500, 500);
console.log("Fourth image draw : " + ctx.getImageData(66, 27, 1, 1).data);

ctx.drawImage(IMG, 0, 0, 500, 500);
console.log("fifth image draw : " + ctx.getImageData(66, 27, 1, 1).data);

Chrome上的结果：

"first image draw : 181,1,1,255"
"Second image draw : 181,1,1,255"
"Third image draw : 181,1,2,255"
"Fourth image draw : 181,1,2,255"
"fifth image draw : 181,1,2,255"

Firefox上的结果：

"first image draw : 181,1,2,255"
"Second image draw : 181,1,2,255"
"Third image draw : 181,1,2,255"
"Fourth image draw : 181,1,2,255"
"fifth image draw : 181,1,2,255"

这种行为只发生在基于 chromium 的浏览器上，无论如何我都会得到 webkit/firefox。RGB(181,1,2)

我在 codepen 上重新创建了这种行为：在 chrome/firefox 上打开它并查看区别：https://codepen.io/sh4kman/pen/qBgaNbe

屏幕截图比较

我试过了：

1. 禁用抗锯齿 （context.imageSmoothingEnabled= false）
2. 在每次 getImageData（） 调用之前/之后清除画布 （canvas.clearRect（））

我知道不同的浏览器可以对图像有不同的渲染/舍入颜色，但在这里我在同一个浏览器上有不同的值，总是遵循相同的模式