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);
var i;
for (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()	Yes	9.0	Yes	Yes	Yes

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

❮ Riferimento tela HTML