HTML5 Различные значения цвета холста на разных машинах

Мы создаем игру, в которой мы используем текстурные маски для обозначения определенных свойств объектов. Например, синий пиксель со значением 250 (x, x, 250) на маске текстуры означает, что это место, где текстура B прикрепляется к нему и т. Д. Все хорошо.HTML5 Различные значения цвета холста на разных машинах

Пока мы не протестировали его на 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 ------------

Как вы видите, есть много более голубоватые пикселей, оказываемых на Маках. И все пиксели также имеют изменения зеленых значений.

Здесь размещены те же пиксели на двух машинах: 0, 0, 252 будет 10, 35, 248 на Mac.

Все машины в основном используют Chrome. Тем не менее, каждая машина получает одинаковые результаты в Firefox.

Каков способ преодолеть это? Почему это происходит?

Мы можем, конечно, написать код, чтобы сопоставить каждое значение цвета с «правильным» значением, но это решение просто глупо, и мы предпочли бы не использовать этот путь.

источник

2014-01-08 Shomz

Хотя я не знаю, как обойти эту проблему, это, по-видимому, вызвано тем, что OSX справляется с цветовыми пространствами и отображает цветовые профили. См. Http://iccir.com/articles/osx-color-conversions/ –

@TimothyGroote Это очень полезно, спасибо! – Shomz

Спасибо. :) Я собираюсь посмотреть, знает ли кто-нибудь об этом решении. –

Проблема, как указано в комментариях. Проблема связана с тем, как браузер обрабатывает цветовые профили ICC. Браузеры пытаются исправить изображения, но они не всегда работают так, как здесь.

Для этого нет программной работы. Тест можно выполнить в локальной среде, отключив параметры управления цветом в браузере, но это повлияет только на ваш браузер, а не на пользователя.

Вы можете попробовать удалить любой профиль ICC, который имеет изображение (в Photoshop используйте Save for web), или вы можете сделать простую «коррекцию цвета», если палитра ограничена повторением пикселей, находящимися в палитре, и используйте допуск значение, чтобы вернуть значение обратно к предполагаемому значению.

Это, конечно, не так изящно - вариант - перенести проверку допуска на основную цепь, если это возможно (т. Е. Градиенты или близкие цвета не сработают с этим).

Мои 2 цента ...

источник

2014-01-09 03:43:51 K3N

Спасибо. По какой-то причине мы подумали, что цветовое профилирование происходит на гораздо более позднем этапе - когда-то, прежде чем отображать изображение на экране. Думаю нет. Похоже, нам придется реэкспортировать обложку без данных профиля ICC. Я приму этот ответ, если никто не придумает более конкретного решения. – Shomz

@Shomz коррекция происходит во время загрузки. Я забыл упомянуть также гамма-коррекцию, которая может * проходить * с ICC или без нее (сохранение гамма-информации в PNG является необязательным форматом). – K3N

HTML5 Различные значения цвета холста на разных машинах

ответ

Смежные вопросы