Método HTML canvas createImageData()
Ejemplo
Cree un objeto ImageData de 100*100 píxeles donde cada píxel sea rojo y colóquelo en el lienzo:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (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);
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definición y uso
El método createImageData() crea un nuevo objeto ImageData en blanco. Los valores de píxel del nuevo objeto son de color negro transparente de forma predeterminada.
Por cada píxel en un objeto ImageData hay cuatro piezas de información, los valores RGBA:
R - El color rojo (de 0 a 255)
G - El color verde (de 0 a 255)
B - El color azul (de 0 a 255)
A - El canal alfa (de 0 a 255; 0 es transparente y 255 es completamente visible)
Entonces, el negro transparente indica: (0,0,0,0).
La información de color/alfa se mantiene en una matriz, y dado que la matriz contiene 4 piezas de información por cada píxel, el tamaño de la matriz es 4 veces el tamaño del objeto ImageData: ancho*alto*4. (Una forma más fácil de encontrar el tamaño de la matriz es usar ImageDataObject.data.length)
La matriz que contiene la información de color/alfa se almacena en la propiedad de datos del objeto ImageData.
Sugerencia: después de manipular la información de color/alfa en la matriz, puede volver a copiar los datos de la imagen en el lienzo con el método putImageData() .
Ejemplos:
La sintaxis para hacer rojo el primer píxel en el objeto ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
La sintaxis para hacer verde el segundo píxel en el objeto ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
Sintaxis JavaScript
Hay dos versiones del método createImageData():
1. Esto crea un nuevo objeto ImageData con las dimensiones especificadas (en píxeles):
| Sintaxis de JavaScript: | var imgData= contexto .createImageData( ancho,alto ); |
|---|
2. Esto crea un nuevo objeto ImageData con las mismas dimensiones que el objeto especificado por anotherImageData (esto no copia los datos de la imagen):
| JavaScript syntax: | var imgData=context.createImageData(imageData); |
|---|
Valores paramétricos
| Parameter | Description |
|---|---|
| width | The width of the new ImageData object, in pixels |
| height | The height of the new ImageData object, in pixels |
| imageData | anotherImageData object |
❮ Referencia de lienzo HTML