Método HTML lienzo getImageData()
Ejemplo
El siguiente código copia los datos de píxeles para un rectángulo específico en el lienzo con getImageData(), y luego vuelve a colocar los datos de la imagen 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);
}
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definición y uso
El método getImageData() devuelve un objeto ImageData que copia los datos de píxeles del rectángulo especificado en un lienzo.
Nota: El objeto ImageData no es una imagen, especifica una parte (rectángulo) en el lienzo y contiene información de cada píxel dentro de ese rectángulo.
Por cada píxel en un objeto ImageData hay cuatro piezas de información, los valores RGBA:
R - El color rojo (de 0 a 255)
G - El color verde (de 0 a 255)
B - El color azul (de 0 a 255)
A - El canal alfa (de 0 a 255; 0 es transparente y 255 es completamente visible)
La información de color/alfa se mantiene en una matriz y se almacena en la propiedad de datos del objeto ImageData.
Sugerencia: después de manipular la información de color/alfa en la matriz, puede volver a copiar los datos de la imagen en el lienzo con el método putImageData() .
Ejemplo:
El código para obtener información de color/alfa del primer píxel en el objeto ImageData devuelto:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Sugerencia: también puede usar el método getImageData() para invertir el color de cada píxel de una imagen en el lienzo.
Recorra todos los píxeles y cambie los valores de color usando esta fórmula:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
¡Vea a continuación un ejemplo de "Pruébelo usted mismo"!
Sintaxis JavaScript
| Sintaxis de JavaScript: | contexto .getImageData( x,y,ancho,alto ); |
|---|
Valores paramétricos
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Más ejemplos
Imagen a utilizar:
Ejemplo
Usa getImageData() para invertir el color de cada píxel 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
var i;
for (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);
❮ Referencia de lienzo HTML