Canvas getImageData() 方法

Canvas 参考手册

定義和用法

getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數據。

對於 ImageData 對象中的每個像素，都存在著四方面的資訊，即 RGBA 值：

  • R - 紅色 (0-255)
  • G - 綠色 (0-255)
  • B - 藍色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)

color/alpha 以數組形式存在，並存儲於 ImageData 對象的 data 屬性中。

Mga payo:在操作完成數組中的 color/alpha 資訊之後，您可以使用 putImageData() 方法將圖像數據拷貝回畫布上。

例子：

以下代碼可獲得被返回的 ImageData 對象中第一個像素的 color/alpha 資訊：

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

Subukan ang sarili

Mga payo:您也可以使用 getImageData() 方法來反轉畫布上某個圖像的每個像素的顏色。

使用該公式遍歷所有的像素，並改變其顏色值：

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

（請見下面的“親自試一試”實例。）

Mga halimbawa

Halimbawa 1

Ang sumusunod na kodigo ay gumagamit ng getImageData() upang kopyahin ang datos ng pixel ng tinukoy na rectangular sa ibabaw ng canvas, at pagkatapos ay ilagay ang datos ng imahe sa ibabaw ng canvas sa pamamagitan ng 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);
}

Subukan ang sarili

Mga payo:Maraming halimbawa na ibinigay sa ibaba ng pahina.

Gramata

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

Halaga ng Parametro

Parametro Paglalarawan
x Ang x-sukat ng taas na magsisimula sa kopya sa kanyang lugar sa itaas ng-kanan.
y Ang y-sukat ng taas na magsisimula sa kopya sa kanyang lugar sa itaas ng-kanan.
width Ang lapad ng pook na magiging kopya na rectangular.
height Ang taas ng pook na magiging kopya na rectangular.

Higit pang halimbawa

Halimbawa 2

Ang imahe na gagamitin:

Ang Tulip

Gamitin ang getImageData() upang pagbaligtad ang kulay ng bawat pixel ng imahe sa ibabaw ng canvas.

Ang iyong browser ay hindi sumusuporta sa tag na HTML5 canvas.

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);
// Pagbaligtad ng kulay
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);

Subukan ang sarili

Suporta ng Browser

Ang mga numero sa talahanayan ay nagtatala ng unang bersyon ng browser na ganap na sumusuporta sa katangian na ito.

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

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

Canvas 参考手册