HTML-canvas getImageData() Methode
Voorbeeld
De onderstaande code kopieert de pixelgegevens voor een opgegeven rechthoek op het canvas met getImageData(), en plaatst de afbeeldingsgegevens vervolgens terug op het canvas met putImageData():
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definitie en gebruik
De methode getImageData() retourneert een ImageData-object dat de pixelgegevens voor de opgegeven rechthoek op een canvas kopieert.
Opmerking: het ImageData-object is geen afbeelding, het specificeert een deel (rechthoek) op het canvas en bevat informatie over elke pixel binnen die rechthoek.
Voor elke pixel in een ImageData-object zijn er vier stukjes informatie, de RGBA-waarden:
R - De kleur rood (van 0-255)
G - De kleur groen (van 0-255)
B - De kleur blauw (van 0-255)
A - Het alfakanaal (van 0-255; 0 is transparant en 255 is volledig zichtbaar)
De kleur/alfa-informatie wordt bewaard in een array en wordt opgeslagen in de eigenschap data van het ImageData-object.
Tip: Nadat u de kleur/alfa-informatie in de array hebt gemanipuleerd, kunt u de afbeeldingsgegevens terug naar het canvas kopiëren met de methode putImageData() .
Voorbeeld:
De code voor het verkrijgen van kleur/alfa-informatie van de eerste pixel in het geretourneerde ImageData-object:
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
Tip: U kunt ook de methode getImageData() gebruiken om de kleur van elke pixels van een afbeelding op het canvas om te keren.
Loop door alle pixels en verander de kleurwaarden met behulp van deze formule:
red = 255-old_red;
green = 255-old_green;
blue = 255-old_blue;
Zie hieronder voor een "Probeer het zelf" voorbeeld!
JavaScript-syntaxis
| JavaScript-syntaxis: | context .getImageData( x, y, breedte, hoogte ); |
|---|
Parameterwaarden
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Meer voorbeelden
Afbeelding om te gebruiken:
Voorbeeld
Gebruik getImageData() om de kleur van elke pixels van een afbeelding op het canvas om te keren:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255-imgData.data[i];
imgData.data[i+1] = 255-imgData.data[i+1];
imgData.data[i+2] = 255-imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 0, 0);
❮ Canvasobject