Los últimos tutoriales de desarrollo web
 

HTML canvas getImageData() Method

<Objeto Canvas

Ejemplo

El código siguiente copia los datos de píxeles para un rectángulo especificado en el lienzo con getImageData() , y luego poner los datos de la imagen de nuevo en el lienzo con 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);
}
Inténtalo tú mismo "

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Método
getImageData() 4.0 9.0 3.6 4.0 10.1

Definición y Uso

El getImageData() método devuelve un objeto ImageData que copia los datos de píxel para el rectángulo especificado en una lona.

Note: El objeto ImageData no es una imagen, se especifica una parte (rectangle) en el lienzo, y mantiene la información de cada píxel dentro de ese rectángulo.

Para cada píxel de un objeto ImageData hay cuatro piezas de información, los valores RGBA:

R - El color rojo (from 0-255)
G - El color verde (from 0-255)
B - El color azul (from 0-255)
A - El canal alfa (from 0-255; 0 is transparent and 255 is fully visible)

La información de color / alfa se lleva a cabo en una matriz, y se almacena en la de datos propiedad del objeto ImageData.

Tip: Después de haber manipulado la información de color / alfa en la matriz, puede copiar los datos de la imagen de nuevo en el lienzo con la putImageData() método.

Example:

El código para obtener información de color / alfa del primer píxel en el objeto devuelto ImageData:

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

Inténtalo tú mismo

Tip: También puede utilizar el getImageData() método para invertir el color de cada píxeles de una imagen en el lienzo.

Loop a través de todos los píxeles y cambiar los valores de color utilizando esta fórmula:

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

Vea a continuación una "Try it Yourself" ejemplo!


sintaxis JavaScript

la sintaxis de JavaScript: context . getImageData( x,y,width,height ) ;

Los valores de los parámetros

Parámetro Descripción
x La coordenada x (in pixels) de la esquina superior izquierda para iniciar la copia de
y La coordenada y (in pixels) de la esquina superior izquierda para iniciar la copia de
width La anchura del área rectangular que se copie
height La altura del área rectangular que se copie

Ejemplos

Más ejemplos

Imagen a utilizar:

El grito

Ejemplo

Utilice getImageData() para invertir el color de cada píxeles de una imagen en el lienzo:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
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);
Inténtalo tú mismo "

<Objeto Canvas