Método createImageData() de Canvas

Manual de referencias de Canvas

Definición y uso

createImageData() método para crear un nuevo objeto ImageData en blanco. El valor predeterminado de los píxeles del nuevo objeto es negro transparente.

Para cada píxel del objeto ImageData, hay cuatro aspectos 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)

Por lo tanto, el negro transparente se representa como (0,0,0,0).

El color/alpha existe en forma de array y, dado que el array contiene cuatro informaciones de cada píxel, el tamaño del array es cuatro veces el tamaño del objeto ImageData. (Hay una manera más sencilla de obtener el tamaño del array, es usar ImageDataObject.data.length)

El array que contiene la información del color/alpha se almacena en el objeto ImageData en data propiedad.

Consejo:En el momento en que se complete la operación de la información del color/alpha en el array, puede usar putImageData() El método copia los datos de la imagen de vuelta al lienzo.

Ejemplo:

Esta sintaxis cambia 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;

Esta sintaxis cambia el segundo píxel del objeto ImageData a rojo:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Ejemplo

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

Tu navegador no admite la etiqueta HTML5 canvas.

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

Inténtalo tú mismo

Sintaxis

Hay dos versiones del método createImageData():

1. Cree un nuevo objeto ImageData con el tamaño especificado (en píxeles):

var imgData=context.createImageData(width,height);

2. Cree un nuevo objeto ImageData de tamaño especificado (en píxeles) que es igual al de otro objeto ImageData existente (no se copiarán los datos de la imagen):

var imgData=context.createImageData(imageData);

Valor del parámetro

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.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Manual de referencias de Canvas