HTML5 Canvas绘制的颜色与提供的颜色不同

时间:2013-07-09 21:49:40

标签: javascript html5 canvas getimagedata

将某种颜色设置为画布的fillStyle并使用fillRect绘制一个矩形后,矩形的颜色有时会与提供的颜色略有不同(getImageData会返回不同的值 - 通常其中一个低于1)。它似乎只发生在使用rgba颜色时(而不是rgb),但我确实需要使用alpha通道。

对于想要调查此问题的人,我为js小提琴制作了一个简单的测试套件: http://jsfiddle.net/LaPdP/1/

有关为什么会发生这种情况的任何想法,以及是否有任何方法可以解决这个问题?如果它至少总是发生在相同的值上,那么我只是通过将其增加1来绕过它,但对我来说它似乎很随意。

1 个答案:

答案 0 :(得分:3)

2017年更新:我完全忘记了这个答案,但原因与获取/设置时预先倍增数据有关。由于位图中的数字总是整数,因此预乘会的自然结果通常会产生舍入误差,这通常会导致非整数。

遗憾的是,没有方便的方法来解决这个问题。

只是为了澄清下面的伽玛:Gamma(通过伽玛设置或ICC配置文件)会直接影响图像,但对于直接绘制到画布上的形状,这应该不是问题本身因为只有顶部调整显示伽玛,而不是数据本身。

旧答案:

您所遇到的可能是仅在画布标准中部分实施颜色和伽玛校正部分的结果。

各种颜色值的原因,至少在涉及包含ICC配置文件的图像时,是由于浏览器中的内置颜色和伽马校正:

  

4.8.11.1色彩空间和色彩校正

     

canvas API必须仅在两点执行颜色校正:何时   使用自己的伽马校正和色彩空间渲染图像   信息到画布上,将图像转换为颜色空间   画布使用(例如使用2D Context的drawImage()方法)   使用HTMLImageElement对象),以及渲染实际画布时   位图到输出设备。

来源:w3.org

但是,它也在第4.8.11.1节中说明:

  

注意:因此,在2D上下文中,用于在形状上绘制形状的颜色   canvas将完全匹配通过getImageData()获得的颜色   方法

由于写入的状态是work in progress,我的猜测是浏览器具有颜色和伽玛校正的“懒惰”实现,目前也会影响形状 - 或者 - 来自画布的所有颜色信息都会得到纠正在第一个引用中显示配置文件作为后一点。在标准成为最终标准之前,这可能不会改变。