HTML canvas getImageData() metod

HTML5 Canvas-referenshandbok

Definition och användning

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

För varje pixel i ImageData-objektet finns det fyra typer av information, dvs. 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)

color/alpha finns som en array och lagras i ImageData-objektets data egenskapen.

Tips:Efter att ha hanterat arrayen med color/alpha informationer i putImageData() Metoden kopierar bilddata till canvas.

Exempel:

Följande kod kan få taget den tillbaka ImageData-objektets första pixels color/alpha information:

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() metod för att återspegla varje pixels färg på en bild på canvas.

Använd denna formel för att iterera över alla pixlar och ändra deras färgvärden:

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

（Se nedan “Prova själv”-exempel。）

Exempel

Exempel 1

Följande kod kopierar指定的画布矩形的像素数据，然后通过 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 finns på sidans botten.

Syntaks

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

Parametervärde

Parameter Beskrivning
x X-koordinaten för den övre vänstra hörnet av kopieringsstartpositionen.
y Y-koordinaten för den övre vänstra hörnet av kopieringsstartpositionen.
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 återspegla 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
för (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

Numreringen 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