HTML canvas createImageData()Método

Canvas 对象参考手册Objeto Canvas

Ejemplo

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

YourbrowserdoesnotsupporttheHTML5canvastag.

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 del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con 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 del 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 existe en forma de matriz, y como la matriz contiene cuatro datos por cada píxel, el tamaño de la matriz es cuatro veces el del objeto ImageData: width*height*4. (Hay una forma más sencilla de obtener el tamaño de la matriz: usar ImageDataObject.data.length)

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

Consejo:Después de manipular la información de color/alpha en la matriz, puede usar el métodoputImageData()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. Crear un nuevo objeto ImageData con las dimensiones especificadas (en píxeles):

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

2. Crear 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 La altura del objeto ImageData, en píxeles.
imageData Otro objeto ImageData.

Canvas 对象参考手册Objeto Canvas

Otras extensiones