알파 채널을 설정할 때 모바일 장치에서 html5 canvas 픽셀 조작 문제가 발생했습니다.

Question

원시 픽셀 조작을 시도하고 있지만 알파 채널을 설정할 때 안드로이드 장치에서 매우 일관성없는 결과가 나타납니다. 사물의 종류의 간단한 예는 내가보고 있어요 :

<canvas id='canvas' width='128' height='128'></canvas>

var ctx = $("#canvas")[0].getContext('2d'); 
var image = ctx.getImageData(0, 0, 128, 128); 

var idx = 0; 
for (var y=0; y < 128; ++y) { 
    for (var x=0; x < 128; ++x) { 
     image.data[idx+0] = 128; 
     image.data[idx+1] = 128; 
     image.data[idx+2] = 128; 
     image.data[idx+3] = (x+y); 
     idx += 4; 
    } 
} 

ctx.putImageData(image, 0, 0); 

코드도 사용할 여기 : http://jsfiddle.net/U3rwY/이

위의 코드의 목적은

은 알파와 고체 회색 사각형을 가지고 이 값은 0에서 255까지 증가하므로 배경 모서리에서 회색으로 바뀌는 사각형이 보일 것입니다. 안드로이드에

는 우리가 볼 수 있지만 : 그리고 이것은 우리가 현대의 데스크톱 브라우저에 표시되는 내용 정확하게은 미리 계산 된 색상을 기대하는 대신처럼 보이는

128,128,128 나는 그것을주고있다. 그것이 맞습니까? 그렇다면 어떤 브라우저가 어떤 값 집합을 기대하고 있는지를 감지 할 수있는 확실한 방법이 있습니까?

Answer 1

안드로이드의 기본 브라우저에서 색상을 변경하는 0 또는 255가 아닌 다른 알파 값을 포함하는 픽셀을 그릴 때 발생하는 문제 일 수 있습니다. 당신은이 문제를 겪고있는 유일한 사람이 아닙니다 : https://code.google.com/p/android/issues/detail?id=17565

나는 그것을 풀 수있는 유일한 기회는 버그를보고하는 것입니다. 또한, 그 버그는 안드로이드 4.1에서 부분적으로 수정 된 것으로 보인다 (4.0은 여전히 ​​그렇다).

Answer 2

예, 안드로이드 브라우저에 문제가 있습니다. 사파리 6.0 및 오페라 모바일은 오페라 미니 및 파이어 폭스 모바일이 아닌 해당 기능을 제공합니다. http://www.html5rocks.com/en/tutorials/canvas/hidpi/

여기에서 이유를 알 수 있습니다.