Ejemplo
Crear un objeto ImageData 100 * 100 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 del 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 (from 0-255)
G - El color verde (from 0-255)
B - El color azul (from 0-255)
A - El canal alfa (from 0-255; 0 is transparent and 255 is fully visible)
Así, negro transparente indica: (0,0,0,0) .
La información de color / alfa se lleva 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: anchura * altura * 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 de datos propiedad del objeto ImageData.
Tip: Después de haber manipulado la información de color / alfa en la matriz, puede copiar los datos de la imagen de nuevo en el lienzo con la putImageData() método.
Examples:
La sintaxis para hacer el primer píxel en los 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 que el segundo píxel en el verde 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 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 (this does not copy the image data) :
| la sintaxis de JavaScript: | 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 |
<Objeto Canvas