Esempio
Creare un oggetto ImageData 100 * 100 pixel in cui ogni pixel è di colore rosso, e metterlo sulla tela:
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); Prova tu stesso " Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'utilizzo
Il createImageData() metodo crea un nuovo oggetto ImageData vuoto. valori dei pixel del nuovo oggetto sono nero trasparente per impostazione predefinita.
Per ogni pixel in un oggetto ImageData ci sono quattro informazioni, i valori RGBA:
R - Il colore rosso (from 0-255)
G - Il colore verde (from 0-255)
B - Il colore blu (from 0-255)
A - Il canale alfa (from 0-255; 0 is transparent and 255 is fully visible)
Così, nero trasparente indica: (0,0,0,0) .
Le informazioni di colore / alfa viene tenuto in una matrice, e poiché l'array contiene 4 pezzi di informazione per ogni pixel, dimensione dell'array è 4 volte la dimensione dell'oggetto ImageData: larghezza * altezza * 4. (Un modo più semplice per trovare la dimensione della matrice, è quello di utilizzare ImageDataObject.data.length)
La matrice contenente le informazioni di colore / alfa viene memorizzato nella dati proprietà dell'oggetto ImageData.
Tip: Dopo aver manipolato le informazioni sul colore / alfa nella matrice, è possibile copiare i dati di immagine di nuovo sulla tela con la putImageData() metodo.
Examples:
La sintassi per fare il primo pixel nella ImageData oggetto rosso:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;La sintassi per fare la seconda pixel nel verde oggetto ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScript Syntax
Ci sono due versioni del createImageData() Metodo:
1. Questo crea un nuovo oggetto ImageData con le dimensioni specificate (in pixel):
| sintassi JavaScript: | var = imgData context . createImageData( width,height ) ; |
|---|
2. Ciò crea un nuovo oggetto ImageData con le stesse dimensioni dell'oggetto specificato dal anotherImageData (this does not copy the image data) :
| sintassi JavaScript: | var = imgData context . createImageData( imageData ) ; |
|---|
valori dei parametri
| Parametro | Descrizione |
|---|---|
| width | La larghezza del nuovo oggetto ImageData, in pixel |
| height | L'altezza del nuovo oggetto ImageData, in pixel |
| imageData | oggetto anotherImageData |
<Oggetto Tela