HTML canvas createImageData() Metodo
Esempio
Crea un oggetto ImageData di 100*100 pixel in cui ogni pixel è rosso e posizionalo 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);
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e utilizzo
Il metodo createImageData() crea un nuovo oggetto ImageData vuoto. Per impostazione predefinita, i valori dei pixel del nuovo oggetto sono di colore nero trasparente.
Per ogni pixel in un oggetto ImageData ci sono quattro informazioni, i valori RGBA:
R - Il colore rosso (da 0-255)
G - Il colore verde (da 0-255)
B - Il colore blu (da 0-255)
A - Il canale alfa (da 0-255; 0 è trasparente e 255 è completamente visibile)
Quindi, il nero trasparente indica: (0, 0, 0, 0).
Le informazioni sul colore/alfa sono contenute in un array e, poiché l'array contiene 4 informazioni per ogni pixel, la dimensione dell'array è 4 volte la dimensione dell'oggetto ImageData: width*height*4. (Un modo più semplice per trovare la dimensione dell'array è usare ImageDataObject.data.length)
La matrice contenente le informazioni sul colore/alfa viene archiviata nella proprietà dei dati dell'oggetto ImageData.
Suggerimento: dopo aver manipolato le informazioni sul colore/alfa nell'array, puoi copiare nuovamente i dati dell'immagine sulla tela con il metodo putImageData() .
Esempi:
La sintassi per rendere rosso il primo pixel nell'oggetto ImageData:
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
La sintassi per rendere verde il secondo pixel nell'oggetto ImageData:
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Sintassi JavaScript
Esistono due versioni del metodo createImageData():
1. Questo crea un nuovo oggetto ImageData con le dimensioni specificate (in pixel):
| sintassi JavaScript: | var imgData = contesto .createImageData( larghezza, altezza ); |
|---|
2. Questo crea un nuovo oggetto ImageData con le stesse dimensioni dell'oggetto specificato da un altro ImageData (questo non copia i dati dell'immagine):
| JavaScript syntax: | var imgData = context.createImageData(imageData); |
|---|
Valori dei parametri
| 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 |
❮ Oggetto Tela