Metode Canvas getImageData()

Panduan Referensi Canvas

Definisi dan penggunaan

getImageData() Metode ini mengembalikan objek ImageData, yang menyalin data pixel kotak yang ditentukan di atas kanvas.

Untuk setiap pixel di objek ImageData, ada empat aspek informasi, yaitu nilai RGBA：

  • R - Merah (0-255)
  • G - Hijau (0-255)
  • B - Biru (0-255)
  • A - channel alpha (0-255; 0 adalah transparan, 255 adalah terlihat penuh)

warna/alpha ada dalam bentuk array dan disimpan di objek ImageData data properti.

Petunjuk:Setelah operasi array informasi warna/alpha selesai, Anda dapat menggunakan putImageData() Metode akan menyalin data gambar kembali ke atas kanvas.

Contoh：

Berikut adalah kode yang dapat mengambil informasi warna/alpha pertama pixel ImageData yang diembalikan：

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

Coba sendiri

Petunjuk:Anda juga dapat menggunakan metode getImageData() untuk membalikkan warna setiap pixel gambar di atas kanvas.

Gunakan rumus ini untuk melooping semua pixel dan mengubah nilai warna nya：

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

（Lihat contoh di bawah ini 'Coba Sendiri'。）

Contoh

Contoh 1

Kode di bawah ini menggunakan getImageData() untuk menyalin data pixel persegi panjang yang ditentukan di layar, dan kemudian meletakkan data gambar kembali ke layar 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);
}

Coba sendiri

Petunjuk:Beberapa contoh lainnya disediakan di bagian 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 panjang yang akan disalin.
height Tinggi area persegi panjang yang akan disalin.

Contoh Lainnya

Contoh 2

Gambar yang akan digunakan:

Bunga Tulip

Gunakan getImageData() untuk membalikkan warna setiap pixel gambar di layar.

Peramban 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 tabel menandai versi peramban pertama 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

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

Panduan Referensi Canvas