HTML5 Canvas 在不同机器上的不同颜色值答案

【问题标题】：HTML5 Canvas different color values on different machinesHTML5 Canvas 在不同机器上的不同颜色值
【发布时间】：2014-01-09 11:43:51
【问题描述】：

我们正在构建一个使用纹理蒙版来表示对象的某些属性的游戏。例如，textureA 蒙版上值为 250 (x, x, 250) 的蓝色像素表示这是 textureB 附加到它的位置，等等。一切都很好。

直到我们在 Mac 上测试它（通常使用 Linux/Ubuntu），并发现颜色不同。起初我们认为它是由我们正在使用的一些组件/插件/软件引起的，但通过一个一个禁用它们，我们得到了裸露的 HTML 画布和图像。不幸的是，这也给了我们不同的结果。

所以，这是我们从控制台运行的测试代码（请忽略缺少的分号、范围问题等......这只是我们用于快速测试的东西）：

// create an image in the DOM
img = document.createElement('img');
img.src = '/assets/characters/maleWhite/torso.png';

// create canvas and the context
canvas = document.createElement( 'canvas' );
ctx = canvas.getContext( '2d' );
canvas.width = img.width; 
canvas.height = img.height; 

// draw the image onto the canvas
ctx.drawImage( img, 0, 0, img.width, img.height );

// get pixel data
sourceData = ctx.getImageData( 0, 0, img.width, img.height );
maskData = sourceData.data;

// output the RGB data for those pixel that have blue value bigger than 0
// (pixels that have even the slightest tint of blue)
for (i = 0; i < maskData.length; i += 4) {
    if (maskData[i+2] > 0) console.log('rgb', maskData[i], maskData[i+1], maskData[i+2], '------------');
}

我们在 Linux/Ubuntu 机器上得到的结果是相同的（从控制台粘贴，单独行中的数字表示有多少重复日志行，rgb 和 ---- 之间的数字是 RGB每个蓝色像素的值）：

rgb 255 0 243 ------------ VM124:11
rgb 91 3 242 ------------ VM124:11
rgb 0 3 242 ------------ VM124:11
rgb 68 3 242 ------------ VM124:11
rgb 0 3 242 ------------ VM124:11
9
rgb 0 0 253 ------------ VM124:11
2
rgb 0 0 255 ------------ VM124:11
rgb 211 0 255 ------------ VM124:11
2
rgb 0 0 255 ------------ VM124:11
rgb 177 0 255 ------------ VM124:11
2
rgb 0 0 255 ------------ VM124:11
rgb 38 0 255 ------------ VM124:11
6
rgb 0 0 252 ------------ VM124:11
3
rgb 4 0 241 ------------ VM124:11
3
rgb 0 0 252 ------------ VM124:11
6
rgb 4 0 241 ------------ VM124:11
9
rgb 0 0 247 ------------ VM124:11
9
rgb 4 0 246 ------------ VM124:11
9
rgb 4 0 249 ------------ VM124:11
9
rgb 255 0 248 ------------

但是，在一台 Mac 上，我们得到以下结果：

rgb 255 0 24 ------------ VM67:11
2
rgb 255 0 238 ------------ VM67:11
85
rgb 255 0 24 ------------ VM67:11
2
rgb 255 0 238 ------------ VM67:11
1129
rgb 255 0 24 ------------ VM67:11
rgb 253 0 23 ------------ VM67:11
rgb 255 0 23 ------------ VM67:11
85
rgb 255 0 24 ------------ VM67:11
rgb 225 0 19 ------------ VM67:11
rgb 240 0 21 ------------ VM67:11
85
rgb 255 0 24 ------------ VM67:11
rgb 212 0 17 ------------ VM67:11
rgb 242 0 21 ------------ VM67:11
85
rgb 255 0 24 ------------ VM67:11
rgb 200 0 15 ------------ VM67:11
rgb 196 0 15 ------------ VM67:11
3
rgb 255 0 24 ------------ VM67:11
rgb 228 0 19 ------------ VM67:11
rgb 176 0 12 ------------ VM67:11
rgb 111 0 4 ------------ VM67:11
rgb 64 0 2 ------------ VM67:11
rgb 51 0 1 ------------ VM67:11
rgb 111 0 4 ------------ VM67:11
rgb 161 0 10 ------------ VM67:11
rgb 234 0 20 ------------ VM67:11
68
rgb 255 0 24 ------------ VM67:11
rgb 184 0 13 ------------ VM67:11
rgb 145 0 8 ------------ VM67:11
rgb 255 0 24 ------------ VM67:11
rgb 166 0 11 ------------ VM67:11
rgb 67 0 2 ------------ VM67:11
rgb 91 0 3 ------------ VM67:11
rgb 220 0 18 ------------ VM67:11
66
rgb 255 0 24 ------------ VM67:11
rgb 176 0 12 ------------ VM67:11
rgb 83 0 2 ------------ VM67:11
rgb 49 0 1 ------------ VM67:11
rgb 155 0 9 ------------ VM67:11
65
rgb 255 0 24 ------------ VM67:11
rgb 135 0 7 ------------ VM67:11
rgb 151 0 8 ------------ VM67:11
64
rgb 255 0 24 ------------ VM67:11
rgb 111 0 4 ------------ VM67:11
rgb 160 0 10 ------------ VM67:11
63
rgb 255 0 24 ------------ VM67:11
rgb 94 0 236 ------------ VM67:11
rgb 0 0 236 ------------ VM67:11
rgb 228 0 19 ------------ VM67:11
61
rgb 255 0 24 ------------ VM67:11
rgb 248 0 22 ------------ VM67:11
rgb 70 0 236 ------------ VM67:11
rgb 0 0 236 ------------ VM67:11
rgb 71 0 2 ------------ VM67:11
61
rgb 255 0 24 ------------ VM67:11
rgb 231 0 19 ------------ VM67:11
rgb 44 0 1 ------------ VM67:11
rgb 166 0 11 ------------ VM67:11
rgb 252 0 23 ------------ VM67:11
59
rgb 255 0 24 ------------ VM67:11
rgb 201 0 15 ------------ VM67:11
rgb 155 0 9 ------------ VM67:11
rgb 255 0 23 ------------ VM67:11
59
rgb 255 0 24 ------------ VM67:11
rgb 173 0 12 ------------ VM67:11
rgb 170 0 11 ------------ VM67:11
60
rgb 255 0 24 ------------ VM67:11
rgb 135 0 7 ------------ VM67:11
rgb 185 0 13 ------------ VM67:11
60
rgb 255 0 24 ------------ VM67:11
rgb 84 0 2 ------------ VM67:11
rgb 162 0 10 ------------ VM67:11
59
rgb 255 0 24 ------------ VM67:11
rgb 236 0 20 ------------ VM67:11
rgb 101 0 4 ------------ VM67:11
59
rgb 255 0 24 ------------ VM67:11
rgb 133 0 6 ------------ VM67:11
58
rgb 255 0 24 ------------ VM67:11
rgb 211 0 17 ------------ VM67:11
rgb 163 0 10 ------------ VM67:11
rgb 255 0 24 ------------ VM67:11
2
rgb 255 0 23 ------------ VM67:11
53
rgb 255 0 24 ------------ VM67:11
rgb 255 0 23 ------------ VM67:11
rgb 68 0 2 ------------ VM67:11
rgb 181 0 13 ------------ VM67:11
rgb 255 0 24 ------------ VM67:11
rgb 252 0 23 ------------ VM67:11
rgb 255 0 23 ------------ VM67:11
52
rgb 255 0 24 ------------ VM67:11
rgb 118 0 5 ------------ VM67:11
rgb 180 0 13 ------------ VM67:11
rgb 254 0 23 ------------ VM67:11
2
rgb 253 0 23 ------------ VM67:11
rgb 255 0 23 ------------ VM67:11
48
rgb 255 0 24 ------------ VM67:11
rgb 241 0 21 ------------ VM67:11
rgb 110 0 4 ------------ VM67:11
rgb 77 0 2 ------------ VM67:11
rgb 209 0 16 ------------ VM67:11
3
rgb 255 0 23 ------------ VM67:11
45
rgb 255 0 24 ------------ VM67:11
rgb 223 0 19 ------------ VM67:11
rgb 146 0 8 ------------ VM67:11
rgb 47 0 1 ------------ VM67:11
rgb 108 0 4 ------------ VM67:11
rgb 190 0 14 ----------

而且，在另一台 Mac 上，还有更多不同的值：

32
rgb 252 13 27 ------------ VM728:3
2
rgb 252 38 240 ------------ VM728:3
85
rgb 252 13 27 ------------ VM728:3
2
rgb 252 38 240 ------------ VM728:3
1129
rgb 252 13 27 ------------ VM728:3
rgb 239 12 25 ------------ VM728:3
rgb 242 12 26 ------------ VM728:3
85
rgb 252 13 27 ------------ VM728:3
rgb 213 9 21 ------------ VM728:3
rgb 227 10 23 ------------ VM728:3
85
rgb 252 13 27 ------------ VM728:3
rgb 201 8 19 ------------ VM728:3
rgb 229 11 24 ------------ VM728:3
7
rgb 252 13 27 ------------ VM728:3
6
rgb 250 13 27 ------------ VM728:3
72
rgb 252 13 27 ------------ VM728:3
rgb 189 7 18 ------------ VM728:3
rgb 186 7 17 ------------ VM728:3
3
rgb 252 13 27 ------------ VM728:3
rgb 216 9 22 ------------ VM728:3
rgb 166 5 14 ------------ VM728:3
rgb 105 2 5 ------------ VM728:3
rgb 60 1 2 ------------ VM728:3
6
rgb 37 0 1 ------------ VM728:3
rgb 47 0 1 ------------ VM728:3
rgb 105 2 5 ------------ VM728:3
rgb 152 4 12 ------------ VM728:3
rgb 221 10 23 ------------ VM728:3
68
rgb 252 13 27 ------------ VM728:3
rgb 174 6 15 ------------ VM728:3
rgb 137 4 10 ------------ VM728:3
rgb 246 12 26 ------------ VM728:3
rgb 157 4 13 ------------ VM728:3
rgb 63 1 2 ------------ VM728:3
rgb 86 1 4 ------------ VM728:3
rgb 209 9 20 ------------ VM728:3
66
rgb 252 13 27 ------------ VM728:3
rgb 166 5 14 ------------ VM728:3
rgb 78 1 3 ------------ VM728:3
rgb 45 0 1 ------------ VM728:3
rgb 146 4 11 ------------ VM728:3
65
rgb 252 13 27 ------------ VM728:3
rgb 127 3 8 ------------ VM728:3
rgb 142 4 10 ------------ VM728:3
64
rgb 252 13 27 ------------ VM728:3
rgb 105 2 5 ------------ VM728:3
rgb 151 4 12 ------------ VM728:3
62
rgb 252 13 27 ------------ VM728:3
rgb 250 13 27 ------------ VM728:3
rgb 91 35 238 ------------ VM728:3
rgb 10 34 238 ------------ VM728:3
rgb 216 9 22 ------------ VM728:3
61
rgb 252 13 27 ------------ VM728:3
rgb 235 11 25 ------------ VM728:3
rgb 69 35 238 ------------ VM728:3
rgb 10 34 238 ------------ VM728:3
rgb 67 1 2 ------------ VM728:3
2
rgb 250 13 27 ------------ VM728:3
59
rgb 252 13 27 ------------ VM728:3
rgb 218 10 22 ------------ VM728:3
rgb 41 0 1 ------------ VM728:3
rgb 157 4 13 ------------ VM728:3
rgb 238 12 25 ------------ VM728:3
59
rgb 252 13 27 ------------ VM728:3
rgb 190 7 18 ------------ VM728:3
rgb 146 4 11 ------------ VM728:3
rgb 245 12 26 ------------ VM728:3
59
rgb 252 13 27 ------------ VM728:3
rgb 164 5 14 ------------ VM728:3
rgb 161 5 13 ------------ VM728:3
60
rgb 252 13 27 ------------ VM728:3
rgb 127 3 8 ------------ VM728:3
rgb 175 6 15 ------------ VM728:3
60
rgb 252 13 27 ------------ VM728:3
rgb 79 1 3 ------------ VM728:3
rgb 153 4 12 ------------ VM728:3
rgb 251 13 27 ------------ VM728:3
58
rgb 252 13 27 ------------ VM728:3
rgb 223 10 23 ------------

如您所见，Mac 上呈现的蓝色像素更多。并且所有的像素都有绿色值的修改。

这是在两台机器上表示的相同像素：0, 0, 252 在 Mac 上变为 10, 35, 248。

所有机器都主要使用 Chrome。不过，每台机器在 Firefox 中得到相同的结果。

有什么方法可以解决这个问题？为什么会这样？

当然，我们可以编写代码将每个颜色值映射到“正确”值，但这种解决方案很愚蠢，我们宁愿不走这条路。

【问题讨论】：

虽然我不知道如何解决这个问题，但这似乎是由 OSX 处理颜色空间和显示颜色配置文件的方式引起的。请参阅：iccir.com/articles/osx-color-conversions
@TimothyGroote 这很有用，谢谢！
谢谢。 :) 我会留下来看看是否有人知道解决方案。
和我一样，但我正在与@Shomz 合作这个项目。
有趣，所以 HEX 表示可能具有相同的效果？编辑：显然，它看起来不太好。这是一个已知问题，尚未解决。 webmasters.stackexchange.com/questions/15283/…code.google.com/p/chromium/issues/detail?id=44872

标签： javascript html macos canvas

【解决方案1】：

问题在 cmets 中有所指出。该问题与浏览器如何处理 ICC 颜色配置文件有关。浏览器会尝试更正图像，但并不总是像这里预期的那样工作。

没有解决此问题的程序化工作。您可以通过关闭浏览器中的颜色管理选项在本地环境中进行测试，但这只会影响您的浏览器，而不影响用户的。

您可以尝试剥离图像具有的任何 ICC 配置文件（在 Photoshop 中使用 Save for web），或者如果调色板受到限制，则可以通过迭代像素找到调色板条目并使用容差值来进行简单的“颜色校正”将值踢回预期值。

这当然不是那么优雅 - 如果可能的话，可以选择将容差检查移至主链（即渐变或接近的颜色不能很好地处理这个）。

我的 2 美分...

【讨论】：

谢谢。出于某种原因，我们认为色彩配置文件会在更晚的阶段开始 - 有时在将图像渲染到屏幕上之前。可能不会。似乎我们将不得不重新导出没有 ICC 配置文件数据的艺术品。如果没有人提出更具体的解决方案，我会接受这个答案。
@Shomz 更正发生在加载时。我还忘了提到，可以可能在有或没有ICC的情况下进行伽马校正（在PNG中保存伽马信息是可选的格式）。