HTML canvas getImageData() 方法

Panduan rujukan Canvas HTML5

定义和用法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

Pembesar suara:在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

例子：

以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

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

Cuba sendiri

Pembesar suara:Anda juga boleh menggunakan kaedah getImageData() untuk membalik warna setiap piksel imej di atas kertas.

Guna formula ini untuk melintasi semua piksel dan mengubah nilai warna:

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

（Lihat contoh di bawah untuk 'Coba sendiri'.）

Contoh

Contoh 1

Kod di bawah ini menggunakan getImageData() untuk menyalin data piksel persegi yang ditentukan di atas kertas, kemudian meletakkan data imej kembali ke atas kertas dengan 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);
}

Cuba sendiri

Pembesar suara:Lebih banyak contoh disediakan di bawah halaman.

Syntax

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

Nilai parameter

Parameter Description
x Koordinat x titik kiri atas yang akan disalin.
y Koordinat y titik kiri atas yang akan disalin.
width Lebar area persegi yang akan disalin.
height Ketinggian area persegi yang akan disalin.

Lebih banyak contoh

Contoh 2

Imej yang akan digunakan:

Bunga Tulip

Guna getImageData() untuk membalik warna setiap piksel imej di atas kertas.

Browser anda tidak menyokong tag 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);
// 佩ngkalan warna
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);

Cuba sendiri

Dukungan pereka

Angka dalam tabel menunjukkan versi paling awal pereka yang mendukung sifat ini.

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

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.

Panduan rujukan Canvas HTML5