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];
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 |
Más ejemplos
Imagen a utilizar:
Ejemplo
Utilice getImageData() para invertir el color de cada píxeles de una imagen en el lienzo:
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