Metode getImageData() kanvas HTML
Contoh
Kode di bawah ini menyalin data piksel untuk persegi panjang tertentu di kanvas dengan getImageData(), lalu mengembalikan data gambar 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);
}
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| getImageData() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Metode getImageData() mengembalikan objek ImageData yang menyalin data piksel untuk persegi panjang yang ditentukan pada kanvas.
Catatan: Objek ImageData bukan gambar, melainkan menentukan bagian (persegi panjang) di kanvas, dan menyimpan informasi setiap piksel di dalam persegi panjang itu.
Untuk setiap piksel dalam objek ImageData ada empat bagian informasi, nilai RGBA:
R - Warna merah (dari 0-255)
G - Warna hijau (dari 0-255)
B - Warna biru (dari 0-255)
A - Saluran alfa (dari 0-255; 0 transparan dan 255 adalah terlihat sepenuhnya)
Informasi warna/alfa disimpan dalam larik, dan disimpan di properti data objek ImageData.
Tip: Setelah Anda memanipulasi informasi warna/alfa dalam larik, Anda dapat menyalin data gambar kembali ke kanvas dengan metode putImageData() .
Contoh:
Kode untuk mendapatkan informasi warna/alfa dari piksel pertama dalam objek ImageData yang dikembalikan:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
Tip: Anda juga bisa menggunakan metode getImageData() untuk membalikkan warna setiap piksel gambar di kanvas.
Ulangi semua piksel dan ubah nilai warna menggunakan rumus ini:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
Lihat di bawah untuk contoh "Coba Sendiri"!
Sintaks JavaScript
| Sintaks JavaScript: | konteks .getImageData( x,y,lebar,tinggi ); |
|---|
Nilai Parameter
| Parameter | Description |
|---|---|
| x | The x coordinate (in pixels) of the upper-left corner to start copy from |
| y | The y coordinate (in pixels) of the upper-left corner to start copy from |
| width | The width of the rectangular area you will copy |
| height | The height of the rectangular area you will copy |
Lebih Banyak Contoh
Gambar yang akan digunakan:
Contoh
Gunakan getImageData() untuk membalikkan warna setiap piksel 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
var i;
for (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);
Referensi Kanvas HTML