5

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

我为任何想研究这个问题的人制作了一个关于 js fiddle 的简单测试套件:http: //jsfiddle.net/LaPdP/1/

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

4

1 回答 1

3

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

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

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

老答案:

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

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

4.8.11.1 色彩空间和色彩校正

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

资料来源:w3.org

但是,它还在第 4.8.11.1 节中指出:

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

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

于 2013-07-09T23:40:09.573 回答