Canvas getImageData() methode

Canvas reference manual

Definitie en gebruik

getImageData() De methode retourneert een ImageData-object dat de pixelgegevens van de gedefinieerde rechthoek op het canvas kopieert.

Voor elk pixel in het ImageData-object bestaan er vier soorten informatie, namelijk de RGBA-waarden:

  • R - rood (0-255)
  • G - groen (0-255)
  • B - blauw (0-255)
  • A - alpha kanaal (0-255; 0 is doorschijnend, 255 is volledig zichtbaar)

color/alpha bestaat uit een array en wordt opgeslagen in het ImageData-object. data eigenschappen gebruiken.

Tip:Na het verwerken van de color/alpha-informatie in het array, kunt u putImageData() De methode kopieert de beeldgegevens terug naar het canvas.

Voorbeeld:

De volgende code haalt de color/alpha-informatie van de eerste pixel van het geretourneerde ImageData-object.

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Probeer het zelf uit

Tip:U kunt ook de getImageData() methode gebruiken om de kleuren van elke pixel van een bepaald beeld op het canvas te omkeren.

Gebruik deze formule om alle pixels te loopen en hun kleurwaarden te wijzigen:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

Zie onderstaande 'Probeer het zelf' voorbeeld.

Voorbeeld

Voorbeeld 1

De volgende code kopieert de pixelgegevens van een gedefinieerd rechthoekig gebied van het canvas met getImageData() en plaatst de afbeeldingsgegevens 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);
}

Probeer het zelf uit

Tip:Meer voorbeelden zijn beschikbaar aan de onderkant van de pagina.

Syntaxis

var imgData = context.getImageData(x,y,width,height);

Parameterswaarden

Parameters Beschrijving
x X-coördinaat van de linkerbovenhoek van het begin van de kopiëren.
y Y-coördinaat van de linkerbovenhoek van het begin van de kopiëren.
width Breedte van het te kopiëren rechthoekige gebied.
height Hoogte van het te kopiëren rechthoekige gebied.

Meer voorbeelden

Voorbeeld 2

Te gebruiken afbeelding:

De Tulpen

Gebruik getImageData() om de kleur van elk pixel van het beeld op het canvas te keren.

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
// K颜色反转
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);

Probeer het zelf uit

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas reference manual