Chromium系浏览器canvas.getImageData()返回值不一致问题及解决

编辑：解决方案
在canvas获取2D上下文时启用willReadFrequently: true配置，即可让Chromium浏览器的getImageData()返回一致的像素值。

问题详情 #

我开发的程序通过canvas.getImageData()获取canvas中加载图片的像素数据，分析RGB值后进行计算。但仅在Chrome/Chromium/Edge等Chromium系浏览器中出现异常：

• 首次加载图片并调用getImageData()时，某特定像素返回值为RGB(181,1,1)
• 重复使用canvas.drawImage()加载同一张图片后，同一像素的返回值变为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)。

已尝试的无效方法 #

• 禁用抗锯齿：设置context.imageSmoothingEnabled= false
• 每次调用getImageData()前后用canvas.clearRect()清空canvas

虽然不同浏览器的图片渲染、颜色舍入逻辑可能存在差异，但同一浏览器内出现这种有规律的返回值变化仍属异常。

内容的提问来源于stack exchange，提问作者sharkman