Contoh
Kode di bawah salinan data pixel untuk persegi panjang yang ditentukan pada kanvas dengan getImageData() , dan kemudian menempatkan data gambar kembali ke kanvas 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);
} Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| getImageData() | iya nih | 9.0 | iya nih | iya nih | iya nih |
Definisi dan Penggunaan
The getImageData() metode mengembalikan sebuah objek imageData yang salinan data pixel untuk persegi panjang ditentukan pada kanvas.
Catatan: Objek imageData tidak gambar, ia menentukan bagian (persegi panjang) di kanvas, dan memegang informasi dari setiap pixel dalam persegi panjang itu.
Untuk setiap pixel dalam suatu objek imageData ada empat potongan informasi, nilai-nilai RGBA:
R - Warna merah (0-255)
G - Warna hijau (0-255)
B - Warna biru (0-255)
A - Saluran alpha (0-255; 0 transparan dan 255 adalah sepenuhnya terlihat)
Informasi warna / alpha diadakan di sebuah array, dan disimpan dalam data properti dari objek imageData.
Tip: Setelah Anda telah memanipulasi informasi warna / alpha dalam array, Anda dapat menyalin data gambar kembali ke kanvas dengan putImageData() metode.
Contoh:
Kode untuk mendapatkan informasi warna / alpha dari pixel pertama di objek imageData itu kembali:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Cobalah sendiri " Tip: Anda juga dapat menggunakan getImageData() metode untuk membalikkan warna setiap pixel dari suatu gambar di kanvas.
Loop melalui semua piksel dan mengubah nilai warna menggunakan rumus ini:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Lihat di bawah untuk "Cobalah Sendiri" contoh!
JavaScript Sintaks
| sintaks JavaScript: | context.getImageData(x,y,width,height); |
|---|
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| x | Koordinat x (dalam pixel) dari sudut kiri atas untuk memulai copy dari |
| y | Y koordinat (dalam pixel) dari sudut kiri atas untuk memulai copy dari |
| width | Lebar area persegi Anda akan menyalin |
| height | Ketinggian daerah persegi panjang Anda akan menyalin |
Contoh lebih
Gambar untuk digunakan:
Contoh
Gunakan getImageData() untuk membalikkan warna setiap pixel dari suatu gambar di kanvas:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
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); Cobalah sendiri "