HTML canvas createImageData() metod

HTML5 Canvas-referenshandbok

Definition och användning

createImageData() Metoden skapar ett nytt tomt ImageData-objekt. Det nya objektets standardpixelvärde är genomskinligt svart.

För varje pixel i ImageData-objektet finns det fyra typer av information, nämligen RGBA-värden:

  • R - rött (0-255)
  • G - grönt (0-255)
  • B - blått (0-255)
  • A - alpha-kanal (0-255; 0 är genomskinlig, 255 är helt synlig)

Därför betyder transparent svart (0,0,0,0).

color/alpha finns som array och eftersom arrayen innehåller fyra bitar av information för varje bildpunkt är arrayens storlek fyra gånger större än ImageData-objektet (det finns en enklare metod att få arrayens storlek, nämligen ImageDataObject.data.length)

Arrayen som innehåller color/alpha-information lagras i ImageData-objektets data egenskapen.

Tips:Efter att ha hanterat arrayens color/alpha-information kan du använda putImageData() Metoden kopierar bilddata tillbaka till canvasen.

Exempel:

Denna syntax ändrar den första bildpunkten till röd:

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

Denna syntax ändrar den andra bildpunkten till röd:

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

Exempel

Skapa ett 100*100 bildpunkt ImageData-objekt, där varje bildpunkt är röd, och lägg det på canvasen:

Din webbläsare stöder inte HTML5 canvas-taggen.

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 det själv

Syntax

Det finns två versioner av createImageData() metoden:

1. Skapa ett nytt ImageData-objekt med angiven storlek (i pixlar):

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

2. Skapa ett nytt ImageData-objekt med samma dimensioner som det angivna andra ImageData-objektet (kopierar inte bilddata):

var imgData=context.createImageData(imageData);

Parametervärde

Parameter Beskrivning
width Breedden på ImageData-objektet, mätt i pixlar.
height Höjden på ImageData-objektet, mätt i pixlar.
imageData En annan ImageData-objekt.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversionen som helt stöder denna egenskap.

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

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

HTML5 Canvas-referenshandbok