Canvas getImageData() 方法

Panduan Rujukan Canvas

定义和用法

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

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

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

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

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

例子：

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

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

Coba sendiri

Petunjuk:您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。

使用该公式遍历所有的像素，并改变其颜色值：

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

（请见下面的“亲自试一试”实例。）

Contoh

Contoh 1

Kode di bawah ini menggunakan getImageData() untuk menyalin data pixel persegi yang ditentukan di atas kanvas, lalu mengembalikan data gambar ke kanvas melalui 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);
}

Coba sendiri

Petunjuk:Beberapa contoh lainnya disediakan di bawah halaman.

Sintaks

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

Nilai parameter

Parameter Deskripsi
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.

Contoh lebih banyak

Contoh 2

Gambar yang akan digunakan:

The Tulip

Gunakan getImageData() untuk membalik warna setiap pixel gambar di atas kanvas.

Browser anda tidak mendukung 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);
// Balik 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);

Coba sendiri

Dukungan peramban

Angka di dalam jadwal menunjukkan versi paling awal peramban yang sepenuhnya mendukung atribut ini.

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

Komen:Internet Explorer 8 dan versi lebih awal tidak mendukung elemen <canvas>.

Panduan Rujukan Canvas