HTML canvas createImageData()Método

HTML canvas 参考手册 Manual de referencia de HTML canvas

Ejemplo

Crea un objeto ImageData de 100*100 píxeles, donde cada píxel es rojo, y luego colócalo en el lienzo:

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

Pruébalo »

Compatibilidad con navegadores

Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método createImageData().

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método createImageData() crea un nuevo objeto ImageData en blanco. El valor de píxel predeterminado del nuevo objeto es transparent black.

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)

Por lo tanto, transparent black representa (0,0,0,0).

La información de color/alpha se almacena en forma de matriz, y dado que la matriz contiene cuatro datos por píxel, el tamaño de la matriz es cuatro veces el objeto ImageData: width*height*4. (Hay una forma más sencilla de obtener el tamaño de la matriz, que es usar ImageDataObject.data.length)

La matriz que contiene la información de color/alpha se almacena en ladatapropiedad del objeto ImageData.

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

Ejemplo:

Sintaxis para cambiar el primer píxel del objeto ImageData a rojo:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Sintaxis para cambiar el segundo píxel del objeto ImageData a verde:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Sintaxis de JavaScript

Hay dos versiones del método createImageData():

1. Crea un nuevo objeto ImageData con las dimensiones especificadas (en píxeles):

Sintaxis de JavaScript:	var imgData=context.createImageData(width,height);

2. Crea un nuevo objeto ImageData con las mismas dimensiones que otro objeto ImageData especificado (no copia los datos de imagen):

Sintaxis de JavaScript:	var imgData=context.createImageData(imageData);

Valores de parámetros

Parámetro	Descripción
width	El ancho del objeto ImageData, en píxeles.
height	El alto del objeto ImageData, en píxeles.
imageData	Otro objeto ImageData.

Manual de referencia de HTML canvas Otras extensiones

HTMLEtiqueta