Metode HTML canvas getImageData()

Panduan referensi HTML5 Canvas

Definisi dan penggunaan

getImageData() Metode ini mengembalikan objek ImageData, yang menyalin data pixel persegi panjang yang ditentukan di papan gambar.

Untuk setiap pixel dalam 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 transparen, 255 adalah terlihat penuh)

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

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

Contoh:

Berikut kode dapat mengambil informasi warna/alpha pixel pertama dalam objek ImageData yang dikembalikan:

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

Coba sendiri

Petunjuk:alpha=imgData.data[3];

Anda juga dapat menggunakan metode getImageData() untuk membalikan warna setiap pixel gambar di layar.

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

Lihat contoh di bawah ini untuk 'Coba Sendiri'.)

Contoh

Contoh 1

Kode di bawah ini menggunakan getImageData() untuk menyalin data pixel persegi panjang yang ditentukan di layar, lalu menempatkan 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 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 Ketinggian area persegi panjang yang akan disalin.

Lebih banyak contoh

Contoh 2

Gambar yang akan digunakan:

The Tulip

Gunakan getImageData() untuk membalikan 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);
// Mengembalikan 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 browser

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini penuh.

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 HTML5 Canvas