HTML5 Canvas 다른 컴퓨터에서 다른 색상 값

텍스처 마스크를 사용하여 개체의 특정 속성을 나타내는 게임을 만들고 있습니다. 예를 들어, textureA 마스크의 값이 250 (x, x, 250) 인 청색 픽셀은 이것이 textureB가 붙는 장소라는 것을 나타냅니다.HTML5 Canvas 다른 컴퓨터에서 다른 색상 값

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 ------------

맥에서 렌더링 많은 푸른 빛이 도는 픽셀이 보시다시피

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에

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에서 우리는 다음 얻는다. 그리고 모든 픽셀에는 녹색 값의 수정 사항이 있습니다.

다음은 두 대의 컴퓨터에 표시된 동일한 픽셀입니다. 0, 0, 252은 Mac에서는 10, 35, 248이됩니다.

모든 기계는 주로 Chrome을 사용합니다. 각 기계는 파이어 폭스에서 같은 결과를 얻는다.

이 문제를 극복하기위한 방법은 무엇입니까? 왜 이런 일이 일어나는 걸까요?

각 색상 값을 "올바른"값으로 매핑하는 코드를 작성할 수는 있지만 그 해결책은 단지 어리석은 것이며 그 대신 우리는 그 경로를 사용하지 않을 것입니다.

출처

2014-01-08 Shomz

문제를 해결하는 방법을 모르겠지만 OSX에서 색상 공간을 처리하고 색상 프로파일을 표시하는 방법으로 인해 발생하는 것으로 보입니다. 참조 : http://iccir.com/articles/osx-color-conversions/ –

@TimothyGroote 이것은 매우 유용합니다. 감사합니다! – Shomz

감사합니다. :) 나는이 문제에 대한 해결책을 아는 사람이 있는지 살펴보고 있습니다. –

문제는 의견에서 일종의 지적입니다. 이 문제는 브라우저에서 ICC 색상 프로파일을 처리하는 방법과 관련됩니다. 브라우저는 이미지를 수정하려고하지만 여기에 나온대로 작동하지 않을 수 있습니다.

이에 대한 프로그래밍 방식의 해결 방법은 없습니다. 브라우저에서 색상 관리 옵션을 해제하여 로컬 환경에서 테스트를 수행 할 수 있지만 사용자의 브라우저가 아니라 브라우저에만 영향을 미칩니다.

이미지에있는 ICC 프로파일을 벗겨 낼 수 있습니다 (Photoshop에서는 웹 저장). 팔레트 엔트리를 찾는 픽셀을 반복하고 허용 오차를 사용하여 팔레트가 제한된 경우 간단한 "색 보정"을 수행 할 수 있습니다 값을 사용하여 값을 원하는 값으로 되돌립니다.

이것은 물론 너무 우아하지 않습니다. 가능한 경우 허용 오차 검사를 주 체인으로 이동하는 것입니다 (예 : 그라디언트 또는 가까운 색이이 기능을 제대로 수행하지 못합니다).

내 2 센트 ...

출처

2014-01-09 03:43:51 K3N

감사합니다. 어떤 이유로 우리는 컬러 프로파일 링이 훨씬 늦은 단계에서 시작될 것이라고 생각했습니다. 이미지를 화면에 렌더링하기 전이었습니다. 맞춰봐. 우리는 ICC 프로파일 데이터없이 아트웍을 다시 내 보내야 할 것처럼 보입니다. 아무도 더 구체적인 해결책을 찾지 못하면이 대답을 받아 들일 것입니다. – Shomz

@Shomz로드 타임에 수정이 발생합니다. ICC 사용 여부에 상관없이 발생할 수있는 감마 보정에 대해서도 언급하지 않았습니다. (PNG의 감마 정보 저장은 선택 사항입니다.) – K3N

HTML5 Canvas 다른 컴퓨터에서 다른 색상 값

답변

관련 문제