HTML canvas createImageData() metode
Definition og brug
createImageData() Metode til at oprette et nyt tomt ImageData-objekt. Standardværdien for pixel i det nye objekt er transparent sort.
For hvert pixel i ImageData-objektet findes der fire aspekter af information, nemlig RGBA-værdier:
- R - rød (0-255)
- G - grøn (0-255)
- B - blå (0-255)
- A - alpha kanal (0-255; 0 er gennemsigtig, 255 er fuldt synlig)
Derfor betyder transparent black (0,0,0,0).
color/alpha findes som array, og da arrayet indeholder fire informationer for hver pixel, er arrayets størrelse fire gange større end ImageData objektet. (Der er en enklere måde at få arrayets størrelse på, nemlig ved at bruge ImageDataObject.data.length)
En array, der indeholder color/alpha informationer, gemmes i ImageData objektets data egenskaben.
Bemærk:Efter at have håndteret arrayets color/alpha informationer, kan du bruge putImageData() Metoden kopierer billeddataene tilbage til lærredet.
Eksempel:
Denne syntaks ændrer den første pixel til rød i ImageData objektet:
imgData = ctx.createImageData(100, 100); imgData.data[0] = 255; imgData.data[1] = 0; imgData.data[2] = 0; imgData.data[3] = 255;
Denne syntaks ændrer den anden pixel til rød i ImageData objektet:
imgData = ctx.createImageData(100, 100); imgData.data[4] = 0; imgData.data[5] = 255; imgData.data[6] = 0; imgData.data[7] = 255;
Eksempel
Opret et 100x100 pixels ImageData objekt, hvor hver pixel er rød, og læg det på lærredet:
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);
Syntax
Der er to versioner af createImageData() metoden:
1. Opret et nyt ImageData-objekt med de angivne dimensioner (i pixels):
var imgData=context.createImageData(width,height);
2. Opret et nyt ImageData-objekt med samme dimensioner som det angivne ImageData-objekt (kopiere ikke billeddata):
var imgData=context.createImageData(imageData);
Parameter værdi
| Parameter | Beskrivelse |
|---|---|
| width | Bredden på ImageData-objektet, målt i pixels. |
| height | Højden på ImageData-objektet, målt i pixels. |
| imageData | En anden ImageData-objekt. |
Browser support
Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne egenskab.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas> elementet.
