javascript - triangle - canvas tutorial

Bucle a través de píxeles en una imagen

Question

Mi proyecto es ingresar una imagen en una etiqueta canvas en una página HTML, y luego recorrer los píxeles y los valores RGBA de los píxeles. Mientras recorro los valores rojos, por lo que cada cuarto valor en el píxel, quiero registrar la posición de los píxeles que representan un píxel blanco. Ahora, tengo la imagen cargándose con algún código que obtuve de este blog, http://www.phpied.com/photo- canvas-tag- flip/ .

Tiene otra publicación en la que da un código sobre cómo recorrer los píxeles y registrar la información que quiero registrar, pero no lo entiendo, y no quiero copiar su código sin saber qué es. ''Estoy haciendo. Entonces, ¿podría alguien explicar el método que está usando o quizás mostrarme otra forma de hacer lo que está haciendo? Este es el enlace a la otra publicación http://www.phpied.com/pixel-manipulation-in- canvas / .

Answer 1

Es sencillo.

Todos los datos de píxeles para un lienzo se almacenan secuencialmente en una matriz.

Los datos del primer píxel ocupan los elementos de la matriz # 0-3 (rojo = 0 / verde = 1 / azul = 2 / alfa = 3).

Los datos del segundo píxel ocupan los elementos del array # 4-7 (rojo = 4 / verde = 5 / azul = 6 / alfa = 7).

Y así...

Puede cargar esos datos de píxel utilizando context.getImageData () y enumerando a través de la matriz.

var imgData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imgData.data;

// enumerate all pixels
// each pixel''s r,g,b,a datum are stored in separate sequential array elements

for(var i=0; i<data.length; i+=4) {
  var red = data[i];
  var green = data[i+1];
  var blue = data[i+2];
  var alpha = data[i+3];
}

También puede cambiar esos valores de matriz y luego guardar la matriz de vuelta a la imagen usando context.putImageData ().

// save any altered pixel data back to the context
// the image will reflect any changes you made

context.putImageData(imgData, 0, 0);

La imagen cambiará de acuerdo con los cambios que haya realizado en su matriz de píxeles.