html5-canvas - imagedata
Problemas de manipulación de píxeles html5 canvas en dispositivos móviles al configurar el canal alfa (2)
Sí, en el navegador de Android hay un problema con esto. Safari 6.0 y Opera Mobile funciona bien para eso, pero no opera mini y firefox mobile. http://www.html5rocks.com/en/tutorials/canvas/hidpi/
aquí puedes aprender por qué.
Estoy intentando hacer algo de manipulación de píxeles en bruto, pero estoy viendo algunos resultados muy inconsistentes en mi dispositivo Android al configurar el canal alfa. Un simple ejemplo de los tipos de cosas que estoy viendo:
<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);
El código también está disponible aquí: http://jsfiddle.net/U3rwY/
La intención del código anterior es tener un cuadrado gris sólido con alfas que aumentan de 0 a 255, por lo que deberíamos ver un cuadrado que se desvanece del color de fondo a gris en la esquina inferior. Y esto es exactamente lo que vemos en cualquier navegador de escritorio moderno:
En Android, sin embargo, vemos esto:
Lo que parece que está esperando un color pre calculado en lugar de los 128,128,128 que le doy. ¿Es correcto, y si es así, existe una forma confiable de detectar qué navegadores están esperando qué conjunto de valores?
Es posible que su problema provenga de un error en el navegador predeterminado de Android, cuando dibuja un píxel que contiene un valor alfa diferente de 0 o 255, altera su color. No es el único que tiene este problema: https://code.google.com/p/android/issues/detail?id=17565
Supongo que la única posibilidad de resolverlo es informar el error. Además, parece que el error fue parcialmente corregido en Android 4.1 (mientras que 4.0 todavía lo tiene).