为什么HTML Canvas getImageData()不返回与刚才设置的值完全相同的值？
在使用putImageData将像素写入HTML Canvas上下文时，当我再次获取它们时，我发现像素值并不完全相同。我已经发布了一个sample test page来显示这个问题。归根结底，问题是：
var id = someContext.getImageData(0,0,1,1);
id.data[0]=id.data[3]=64; // 25% red, 25% alpha
id.data[1]=id.data[2]=0; // No blue or green
someContext.putImageData(id,0,0);
var newData = someContext.getImageData(0,0,1,1);
console.log( newData.data[0] );在Chrome v8上，红色值返回为63；在Firefoxv3.6、Safari v5和IE9上，红色值返回为67 (全部在Windows上)。在OS上，Chrome v7、Safari v5和FirefoxV3.6也以67的形式返回。它们都不会返回到最初设置的64值！
使用setTimeout在设置和重新获取之间进行延迟没有任何区别。更改页面的背景不会有任何影响。在上下文上使用save()和restore() (每个this unlikely article)没有区别。
回答 3
Stack Overflow用户
发布于 2010-11-30 12:55:08
ImageData在HTML5中被定义为未预乘的，但大多数canvas实现使用预乘的后备缓冲区来加速合成等。这意味着当数据被写入然后从后备缓冲区读取时，它可能会改变。
我会假设Chrome v8从webkit.org拿到了一个错误版本的取消预乘的代码(它以前也被破坏过，尽管我不记得最近发生过任何事情，这并不能解释windows唯一的差异)
编辑:每晚在windows上查看webkit是值得的吗？因为imagedata实现没有任何特定于平台的东西，所以它在所有webkit浏览器之间共享，并且在基于MSVC的构建中可能会被破坏
Stack Overflow用户
发布于 2010-12-17 03:13:49
HTML5规范鼓励浏览器供应商使用称为Premultiplied Alpha的东西。本质上，这意味着像素存储在32位整数中，其中每个通道包含8位颜色值。出于性能原因，浏览器使用预乘Alpha。这意味着它根据alpha值预乘颜色值。
下面是一个例子。您可以使用一种颜色，以便RGB的值为128、64、67。现在，为了获得更高的性能，颜色值将被alpha值预乘。因此，在Alpha值为16的情况下，所有颜色值将乘以16/256 (= 0.0625)。在这种情况下，RGB的结果值变为8、4、4.1875 (四舍五入为4，因为像素颜色值不是浮点数)。
当您执行以下操作时，问题就会显现出来:使用特定的Alpha值设置颜色数据，然后拉回实际的颜色值。当您调用4时，先前四舍五入为4的蓝色4.1875将变为64，而不是67。
这就是为什么你会看到这一切，除非浏览器引擎中的底层实现更改为使用不受此影响的颜色系统，否则它永远不会改变。
Stack Overflow用户
发布于 2010-11-30 08:12:58
对我来说像是个舍入问题...
64/255 = 0.2509... (rounded down to give 0.25)
0.25 * 255 = 63.75 (rounded down to give 63)
== OR ==
64/255 = 0.2509... (rounded up to give 0.26)
0.26 * 255 = 66.3 (rounded up to give 67)记住255是最大值，而不是256 ;)
编辑:当然，这不能解释为什么alpha通道的行为...
https://stackoverflow.com/questions/4309364
复制相似问题
腾讯云开发者
