HTML canvas getImageData()Método

HTML canvas 参考手册Referencia de HTML canvas

Ejemplo

El siguiente código copia los datos de píxeles de un rectángulo específico en el lienzo mediante getImageData() y luego coloca los datos de imagen de vuelta en el lienzo mediante putImageData():

const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); function copy() { const imgData = ctx.getImageData(10, 10, 50, 50); ctx.putImageData(imgData, 10, 70); }

Pruébalo »

Soporte del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método getImageData().

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.

Definición y uso

El método getImageData() devuelve un objeto ImageData que copia los datos de píxeles del rectángulo especificado del lienzo.

Nota:El objeto ImageData no es una imagen; especifica una parte (rectángulo) del lienzo y guarda la información de cada píxel dentro de ese rectángulo.

Para cada píxel en el objeto ImageData, existe información en cuatro aspectos, es decir, los valores RGBA:

R - Rojo (0-255)
G - Verde (0-255)
B - Azul (0-255)
A - canal alfa (0-255; 0 es transparente, 255 es completamente visible)

La información de color/alfa se almacena en forma de matriz y se guarda en la propiedaddatadel objeto ImageData.

Consejo:Después de manipular la información de color/alfa en la matriz, puede usar elputImageData()método para copiar los datos de imagen de vuelta al lienzo.

Ejemplo:

El siguiente código obtiene la 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];

Pruébalo

Consejo:También puede usar el método getImageData() para invertir el color de cada píxel de una imagen en el lienzo.

Use 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;

¡Mira el ejemplo 'Pruébalo' a continuación!

Sintaxis de JavaScript

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

Valores de parámetros

Parámetro Descripción
x La coordenada x de la esquina superior izquierda donde comienza la copia (en píxeles).
y La coordenada y de la esquina superior izquierda donde comienza la copia (en píxeles).
width El ancho del área rectangular a copiar.
height La altura del área rectangular a copiar.

实例

Más ejemplos

Imagen a utilizar:

The Scream

Ejemplo

Use getImageData() para invertir el color de cada píxel de la 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);

Pruébalo »

HTML canvas 参考手册Referencia de HTML canvas Otras extensiones