Canvas getImageData() metod

Canvas referenshandbok

Definition och användning

getImageData() Metoden returnerar ett ImageData-objekt som kopierar pixeldata för den specificerade rektangeln på canvasen.

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)

Färg/alpha finns som en array och lagras i ImageData-objektets data egenskapen.

Tips:Efter att ha hanterat arrayen med färg/alpha-informationer kan du använda putImageData() Metoden kopierar bilddata tillbaka till canvasen.

Exempel:

Följande kod kan få tag på färg/alpha-informationen för den första pixeln i den återkommande ImageData-objektet:

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

Prova själv

Tips:Du kan också använda getImageData() -metoden för att vända varje pixels färg på en bild på canvasen.

Använd denna formel för att gå igenom alla pixlar och ändra deras färgvärden:

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

Se exempel nedanför i avsnittet “Prova själv”.

Fall

Exempel 1

Följande kod kopierar den specificerade rektangulära områdets pixeldata från canvas genom att använda getImageData() och lägger tillbaka bilddata till canvas genom 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);
}

Prova själv

Tips:Mer exempel på sidan botten.

Syntax

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

Parametervärde

Parameter Beskrivning
x X-koordinaten för den övre vänstra hörnet av startpositionen för kopiering.
y Y-koordinaten för den övre vänstra hörnet av startpositionen för kopiering.
width Bredden på den rektangulära området som ska kopieras.
height Höjden på den rektangulära området som ska kopieras.

Mer exempel

Exempel 2

Att använda bild:

Tulpan

Använd getImageData() för att vända varje pixels färg på canvas.

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

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);
// Återvänd färg
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);

Prova själv

Webbläsarstöd

Tal i tabellen anger den första webbläsareversion 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.

Canvas referenshandbok