Método createImageData() de HTML canvas

Manual de referencia del Canvas HTML5

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

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

El color/alfa existe en forma de array y, dado que el array contiene cuatro informacións por píxel, el tamaño del array es cuatro veces el tamaño del objeto ImageData. (Hay un método más simple para obtener el tamaño del array, es usar ImageDataObject.data.length)

El array que contiene la información de color/alfa se almacena en data propiedad.

Consejo:Después de operar con la información de color/alfa del array, puedes usar putImageData() El método copia los datos de la imagen 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

Crea un objeto ImageData de 100*100 píxeles, donde cada píxel es rojo, y colócalo 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);

Prueba personalmente

Sintaxis

Hay dos versiones del método createImageData():

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

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

2. Crear un nuevo objeto ImageData del mismo tamaño que otro objeto ImageData especificado (sin copiar los datos de la imagen):

var imgData=context.createImageData(imageData);

Valor del parámetro

Parámetros Descripción
width Anchura del objeto ImageData, en píxeles.
height 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 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

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

Manual de referencia del Canvas HTML5