Método getImageData() del canvas HTML
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 data propiedad.
Consejo:Después de operar con 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];
Consejo:También puedes usar el método getImageData() para invertir los colores de cada píxel de una imagen específica en el lienzo.
Puedes usar 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 por tu cuenta" a continuación。）
Ejemplo
Ejemplo 1
El siguiente código copia los datos de píxeles de un rectángulo específico en el lienzo utilizando getImageData() y luego coloca los datos de imagen de vuelta en el lienzo utilizando 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);
}
Consejo:Más ejemplos se proporcionan en la parte inferior de la página.
Sintaxis
var imgData=context.getImageData(x,y,width,height);
Valores de los parámetros
| Parámetros | Descripción |
|---|---|
| x | Coordenada x del punto superior izquierdo de inicio de la copia. |
| y | Coordenada y del punto superior izquierdo de inicio de la copia. |
| width | Ancho 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:
Usa getImageData() para invertir los colores de cada píxel de la imagen en el lienzo.
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);
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite por primera vez esta propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
