Ejemplo
Crear un 100*100 objeto ImageData píxeles, donde cada píxel es de color rojo, y lo puso sobre 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); Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| createImageData() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
El createImageData() método crea un nuevo objeto ImageData en blanco. valores de los píxeles del objeto nuevo son de color negro transparente por defecto.
Para cada píxel de un objeto ImageData hay cuatro piezas de información, los valores RGBA:
R - El color rojo (de 0-255)
G - El color verde (de 0-255)
B - El color azul (de 0-255)
A - El canal alfa (0-255; 0 es transparente y 255 es completamente visible)
Así, negro transparente indica: (0,0,0,0) .
La información de color / alfa se llevó a cabo en una matriz, y puesto que la matriz contiene 4 piezas de información para 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 utilizar ImageDataObject.data.length)
La matriz que contiene la información de color / alfa se almacena en la data propiedad del objeto ImageData.
Consejo: Después de haber manipulado la información de color / alfa en la matriz, puede copiar los datos de imagen de nuevo en el lienzo con la putImageData() método.
Ejemplos:
La sintaxis para hacer el primer pixel en las ImageData objeto rojo:
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 el segundo píxel en el objeto verde 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 de la createImageData() Método:
1. Esto crea un nuevo objeto ImageData con las dimensiones especificadas (en píxeles):
| la sintaxis de JavaScript: | var imgData=context.createImageData(width,height); |
|---|
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); |
|---|
Los valores de los parámetros
| Parámetro | Descripción |
|---|---|
| width | La anchura del nuevo objeto ImageData, en píxeles |
| height | La altura del nuevo objeto ImageData, en píxeles |
| imageData | objeto anotherImageData |