Esempio
Creare un 100*100 oggetto ImageData 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 per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| createImageData() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Il createImageData() metodo crea un nuovo oggetto ImageData vuoto. i valori dei pixel del nuovo oggetto sono nero trasparente per impostazione predefinita.
Per ogni pixel in un oggetto ImageData ci sono quattro pezzi di informazioni, i valori RGBA:
R - Il colore rosso (0-255)
G - Il colore verde (0-255)
B - Il colore blu (0-255)
A - Il canale alfa (0-255; 0 è trasparente e 255 è completamente visibile)
Così, nero trasparente indica: (0,0,0,0) .
Le informazioni sul colore / alpha si svolge in un array, e dal momento che l'array contiene 4 pezzi di informazioni per ogni pixel, le dimensioni della matrice è 4 volte la dimensione dell'oggetto ImageData: larghezza * altezza * 4. (Un modo più semplice per trovare la dimensione dell'array è utilizzare ImageDataObject.data.length)
La matrice contenente le informazioni sul colore / alpha viene memorizzato nella data proprietà dell'oggetto ImageData.
Suggerimento: Dopo aver manipolato le informazioni sul colore / alpha nella matrice, è possibile copiare i dati di immagine di nuovo sulla tela con la putImageData() metodo.
Esempi:
La sintassi per la realizzazione del primo pixel nelle 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 il secondo 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. Questo crea un nuovo oggetto ImageData con le stesse dimensioni dell'oggetto specificato dal anotherImageData (questo non copia i dati di immagine):
| JavaScript syntax: | 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 |