Método Canvas getImageData()

Manual de referencia de Canvas

Definición y uso

getImageData() El método devuelve un objeto ImageData, que copia los datos de píxeles del rectángulo especificado en el lienzo.

Para cada píxel del objeto ImageData, existen cuatro tipos de información, es decir, los valores RGBA:

  • R - rojo (0-255)
  • G - verde (0-255)
  • B - azul (0-255)
  • A - canal alpha (0-255; 0 es transparente, 255 es completamente visible)

El color/alpha existe en forma de array y se almacena en el objeto ImageData de data propiedad.

Consejo:Después de completar la operación de la información de color/alpha en el array, puede usar putImageData() El método copia los datos de la imagen de vuelta al lienzo.

Ejemplo:

El siguiente código puede obtener la información de color/alpha del primer píxel del objeto ImageData devuelto:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Prueba por ti mismo

Consejo:También puede usar el método getImageData() para invertir los colores de cada píxel de una imagen en el lienzo.

Utilice esta fórmula para recorrer todos los píxeles y cambiar sus valores de color:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(Consulte el ejemplo "Prueba personalmente" a continuación.)

Ejemplo

Ejemplo 1

El siguiente código copia los datos de los píxeles de un rectángulo específico en el lienzo mediante getImageData() y luego coloca los datos de la imagen de vuelta en el lienzo mediante putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Prueba por ti mismo

Consejo:Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

var imgData=context.getImageData(x,y,width,height);

Valor del parámetro

Parámetros Descripción
x Coordenada x del extremo superior izquierdo del punto de inicio de la copia.
y Coordenada y del extremo superior izquierdo del punto de inicio de la copia.
width Anchura del área rectangular que se va a copiar.
height Altura del área rectangular que se va a copiar.

Más ejemplos

Ejemplo 2

Imagen a usar:

The Tulip

Usa getImageData() para invertir los colores de cada píxel de la imagen en el lienzo.

Tu navegador no admite la etiqueta de canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Invierte los colores
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

Prueba por ti mismo

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Manual de referencia de Canvas