Metodo createImageData() di HTML canvas

Manuale di riferimento HTML5 Canvas

Definizione e uso

createImageData() Metodo per creare un nuovo oggetto ImageData vuoto. Il valore predefinito dei pixel del nuovo oggetto è 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)

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

color/alpha esiste in forma di array e, poiché l'array contiene quattro informazioni per ogni pixel, la dimensione dell'array è quadruplicata rispetto all'oggetto ImageData (c'è un modo più semplice per ottenere la dimensione dell'array, ovvero ImageDataObject.data.length).

L'array che contiene le informazioni color/alpha è memorizzato nell'oggetto ImageData, data proprietà.

Suggerimento:Dopo aver completato l'operazione delle informazioni color/alpha nell'array, puoi utilizzare putImageData() Il metodo copia i dati dell'immagine 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

Crea un oggetto ImageData di 100x100 pixel, in cui ogni pixel è rosso, e mettilo 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);

Provalo personalmente

Sintassi

Ci sono due versioni del metodo createImageData():

1. Creare un nuovo oggetto ImageData di dimensioni specificate (in pixel):

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

2. Creare un nuovo oggetto ImageData di dimensioni specificate (non copia i dati dell'immagine):

var imgData=context.createImageData(imageData);

Valore del parametro

Parametro Descrizione
width Larghezza dell'oggetto ImageData, espressa in pixel.
height Altezza dell'oggetto ImageData, espressa in pixel.
imageData Un altro oggetto ImageData.

Supporto 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 HTML5 Canvas