tutorial pengembangan web terbaru
 

HTML canvas getImageData() Method

<Canvas Object

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];

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 "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

Contoh lebih

Gambar untuk digunakan:

The Scream

Contoh

Gunakan getImageData() untuk membalikkan warna setiap pixel dari suatu gambar di kanvas:

YourbrowserdoesnotsupporttheHTML5canvastag.

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