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 la lona 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 para el 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() | Sí | 9.0 | Sí | Sí | Sí |
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 un lienzo.
Nota: El objeto ImageData no es una imagen, se especifica una parte (rectángulo) 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 (de 0-255)
G - El color verde (de 0-255)
B - El color azul (de 0-255)
A - El canal alfa (0-255; 0 es transparente y 255 es completamente visible)
La información de color / alfa se llevó a cabo en una matriz, y se almacena en la data propiedad del objeto ImageData.
Consejo: Después de haber manipulado la información de color / alfa en la matriz, puede copiar los datos de imagen de nuevo en el lienzo con la putImageData() método.
Ejemplo:
El código para obtener la información de color / alfa del primer píxel en el objeto de regresar ImageData:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Inténtalo tú mismo " Consejo: También puede utilizar el getImageData() método para invertir el color de cada píxeles de una imagen en el lienzo.
Recorrer todos los píxeles y cambiar los valores de color utilizando la siguiente fórmula:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Vea a continuación una "Pruébelo usted mismo" 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 (en píxeles) de la esquina superior izquierda para iniciar la copia de |
| y | La coordenada y (en píxeles) de la esquina superior izquierda para iniciar la copia de |
| width | La anchura del área rectangular va a copiar |
| height | La altura del área rectangular va a copiar |
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 "