基于 Chromium 的浏览器返回的 canvas.getimagedata() 值不一致

Question

我当前正在运行一个程序，该程序从先前使用

canvas.getImageData()

加载图像的画布中选取一个像素，分析该像素的 RGB 值，然后根据蓝色和红色值运行计算。

我仅在 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())

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

Answer 1

我无法对此给出实际答案，但可以尝试

willReadFrequently

控制台警告中提到的画布属性
我在 Chromium 上得到了不同的结果。

Canvas2D：将

willReadFrequently

属性设置为 true 时，使用 getImageData 进行多个读回操作会更快。请参阅：https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

我分叉了 CodePen 链接并尝试将值更改为

undefined

（默认）

false

和

true

。 他们所有人的行为都各不相同。

未定义

默认行为

假

与第三个值一致的行为是

1

真实

与第三个值一致的行为是

2

Codepen链接：https://codepen.io/Danny2006/pen/vYbXJWR