HTML5画布绘制像素时颜色与提供的颜色不同

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

我已经在js fiddle上制作了一个简单的测试套件,供任何想要研究此问题的人使用: http://jsfiddle.net/LaPdP/1/

为什么会发生这种情况,是否有任何方法可以解决?如果至少始终发生在相同的值上,那么我将通过增加1来绕过它,但对我来说似乎相当随机。

1个回答

3

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

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

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

旧答案:

您所经历的可能是画布标准中颜色和伽马校正部分的部分实现结果。

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

4.8.11.1 颜色空间和颜色校正

画布API只能在两个点执行颜色校正:渲染具有自己的伽马校正和颜色空间信息的图像到画布上,以将图像转换为画布使用的颜色空间(例如使用2D上下文的drawImage()方法与HTMLImageElement对象),以及在将实际画布位图渲染到输出设备时。

来源:w3.org

但是,在4.8.11.1节中还指出:

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

由于这是一个“正在进行中”的状态,我的猜测是浏览器对颜色和伽马校正有一个“懒惰”的实现,目前也会影响形状 - 或者 - 画布的所有颜色信息都被校正为显示配置文件作为第一段引用中的后一点。这可能不会改变,直到标准变得最终。


非常感谢您的帮助。我想除了等待,没有其他事情可做了。 - Konrad Madej
我来自2016年,可以说我自己也遇到了这个问题。目前等待并不能解决它。 - J.R.
@Jenny,由于某种原因我回到了2017年 :-p,而问题仍然存在 - 不好的消息是,它不会随着当前实现而消失。 - user1693593

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接