Javascript canvas.getImageData IE 与 Chrome

Question

我有一个 Canvas 对象，我想使用 canvas.getImageData 从中获取某个位置的颜色。当我在其上绘制渐变并尝试从点 (0,0) 获取颜色时，chrome 的行为符合预期并返回颜色值 255,255,255，而 IE 返回 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) 而不是选择像素(这种方法还允许您根据输入值在选择器中设置一个点):