Question

我有一个canvas对象，我想从中获取canvas.getImageData的位置颜色。当我在其上绘制渐变并尝试从点（0,0）获取颜色时，chrome的行为与预期相同，并返回颜色值255,255,255，而IE返回254,253,253。

我这里有一个说明我的意思的傻瓜：

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

您可以在IE和Chrome中执行此功能，您将看到不同之处。我使用的是IE v11和Chrome v40。

也许错误发生在我创建画布的过程中。

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有这种差异，还是在创建画布时我错过了什么？

Answer 1

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

我们可以用内部工作来做很多事情，但我们可以调整子像素，这样就不会通过简单地翻译画布半像素来实现。

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

  _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

这很正常......

允许不同的浏览器实现稍微不同的画布渐变效果。

在每个浏览器上，即使一个图像的呈现方式也会略有不同。

Javascript canvas.getImageData IE vs Chrome

2 个答案: