Javascript canvas.getImageData IE 对比 Chrome

Question

我有一个 canvas 对象，我想从中获取 canvas.getImageData 位置的颜色。当我在其上绘制渐变并尝试从点 (0,0) 获取颜色时，chrome 的行为符合预期，returns 颜色值 255,255,255 而 IE returns 254,253,253.

我这里有一个 plunker 显示了我的意思:

http://plnkr.co/edit/BWSn2J2N2A6poaH4WR6a?p=preview

您可以在 IE 和 Chrome 中执行此操作，您会看到不同之处。我使用 IE v11 和 Chrome v40.

也许错误是在我创建 canvas 的过程中。

var RepaintGradient = function(gradient)
{           
    _gradientContext.fillStyle = 'rgb(255,0,0)';
    _gradientContext.fillRect(0,0,width,height);

    var gradientWTT = _gradientContext.createLinearGradient(0, 0, width, 0);
    gradientWTT.addColorStop(0, "white");
    gradientWTT.addColorStop(1, gradient);
    _gradientContext.fillStyle = gradientWTT;
    _gradientContext.fillRect(0, 0, width, height);

    var gradientBTT = _gradientContext.createLinearGradient(0, width, 0, 0);
    gradientBTT.addColorStop(0, "black");
    gradientBTT.addColorStop(1, "transparent");
    _gradientContext.fillStyle = gradientBTT;
    _gradientContext.fillRect(0, 0, width, height);
    var color = _gradientContext.getImageData(0, 0, 1, 1).data;
    alert(color[0]+' '+color[1]+' '+color[2]);
};

这是正常行为吗，IE 和 Chrome 有这种差异，还是我在创建 canvas 时遗漏了什么？

Answer 1

这是由于使用子像素化时混合和合成期间的舍入误差 - 不同的浏览器根据其方法获得不同的结果（IE 和 FireFox 给出相同的结果，webkit 浏览器给出不同的结果）。

我们对内部工作无能为力，但我们可以调整子像素化，因此只需平移 canvas 半像素就不会发生这种情况。

将此行添加到渐变函数的顶部：

  _gradientContext.setTransform(1,0,0,1, 0.5,0.5); // offset 0.5 pixel

and it should work

原因是像素最初是从像素的中心渲染的，这意味着 0.5 的像素是双向插值的。平移 0.5 个像素将使中心与像素网格匹配。

更新（来自评论）：

另一种使用 coordinates to calculate color 值 (HSL) 而不是拾取像素的方法（这种方法还允许您根据输入值在拾取器中设置一个点):

Answer 2

正常...

允许不同的浏览器实现略有不同的 canvas 渐变效果。

即使是一张图片在不同浏览器上的呈现也会略有不同。

Javascript canvas.getImageData IE 对比 Chrome

Javascript canvas.getImageData IE vs Chrome

html

javascript

canvas