Metodo createImageData() del Canvas

Manuale di riferimento del canvas

Definizione e uso

createImageData() Metodo per creare un nuovo oggetto ImageData vuoto. Il valore predefinito dei pixel del nuovo oggetto è il nero trasparente.

Per ogni pixel dell'oggetto ImageData, ci sono quattro tipi di informazioni, ovvero i valori RGBA:

  • R - rosso (0-255)
  • G - verde (0-255)
  • B - blu (0-255)
  • A - canale alpha (0-255; 0 è trasparente, 255 è completamente visibile)

Pertanto, il nero trasparente è rappresentato da (0,0,0,0).

Le informazioni color/alpha esistono in forma di array e poiché l'array contiene quattro informazioni per ogni pixel, la dimensione dell'array è quadruplica rispetto all'oggetto ImageData (per ottenere la dimensione dell'array ci sono modi più semplici, come utilizzare ImageDataObject.data.length)

L'array che contiene le informazioni color/alpha è memorizzato nel campo data nelle proprietà.

Suggerimento:Dopo aver completato l'operazione dell'informazione color/alpha nell'array, è possibile utilizzare putImageData() Il metodo copia i dati dell'immagine indietro sulla lavagna.

Esempio:

Questa sintassi cambia il primo pixel dell'oggetto ImageData in rosso:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Questa sintassi cambia il secondo pixel dell'oggetto ImageData in rosso:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Esempio

Creare un oggetto ImageData di 100x100 pixel, in cui ogni pixel è rosso, e metterlo sulla lavagna:

Il tuo browser non supporta il tag HTML5 canvas.

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

Sintassi

Ci sono due versioni del metodo createImageData():

1. Creare un nuovo oggetto ImageData con le dimensioni specificate (espressi in pixel):

var imgData=context.createImageData(width,height);

2. Creare un nuovo oggetto ImageData di dimensioni identiche a quella di un altro oggetto ImageData specificato (senza copiare i dati dell'immagine):

var imgData=context.createImageData(imageData);

Valore del parametro

Parametro Descrizione
width La larghezza dell'oggetto ImageData, espressa in pixel.
height L'altezza dell'oggetto ImageData, espressa in pixel.
imageData Un altro oggetto ImageData.

Supporto dei browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.

Manuale di riferimento del canvas