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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The getImageData() metode mengembalikan sebuah objek imageData yang salinan data pixel untuk persegi panjang ditentukan pada kanvas.
Note: Objek imageData tidak gambar, ia menentukan bagian (rectangle) di kanvas, dan memegang informasi dari setiap pixel di dalam persegi panjang itu.
Untuk setiap pixel dalam suatu objek imageData ada empat potongan informasi, nilai-nilai RGBA:
R - Warna merah (from 0-255)
G - Warna hijau (from 0-255)
B - Warna biru (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)
Informasi warna / alpha diadakan di sebuah array, dan disimpan dalam data yang 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.
Example:
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];
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 "Try it Yourself" contoh!
JavaScript Sintaks
| sintaks JavaScript: | context . getImageData( x,y,width,height ) ; |
|---|
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| x | Koordinat x (in pixels) dari sudut kiri atas untuk memulai copy dari |
| y | Y koordinat (in pixels) 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 " <Canvas Object