Programming, tutorials, mechatronics, operating systems, and other tech stuff

Pengolahan citra dengan html5 dan javascript bagian 2: Mengakses data pixel

2 comments
Tutorial ini merupakan lanjutan dari tutorial Pengolahan citra dengan html5 dan javascript bagian 1:Menampilkan citra

Mengakses, membaca dan mengubah data pixel adalah salah satu elemen penting dalam pengolahan citra(image processing) dimana nantinya dari data pixel tersebut akan diolah dengan metode-metode olah citra, kemudian mengubah data pixel tersebut untuk memanipulasi citra.

Pada tutorial sebelumnya, kita sudah bisa mengubah gambar kedalam object canvas html 5. Sekarang saya akan membahas tentang bagaimana cara membaca data pixel dan tentu saja menggunakan javascript.

Mari kita ambil script dari bab sebelumnya.

[code lang="html"]
<html>
<head>
<title>Image processing menggunakan canvas dan javascript</title>

</head>
<body>
<img src=jeruk.jpg style=display:none; id=gambarSumber >
<canvas id=kanvasSumber ></canvas>
<script type=text/javascript>
//membuat variabel javascript yang memuat kedua elemen diatas.
var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');

//buat variabel yang memuat tinggi dan lebar gambar
var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;

//samakan tinggi dan lebar kanvas dengan gambar
kanvasSumber.width=lebar;
kanvasSumber.height=tinggi;

//membuat objek 2d dari canvas kemudian menggambar gambarSumber kedalam objek tersebut
var kanvas2d = kanvasSumber.getContext("2d");
kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);
</script>
</body>
</html>[/code]

Langkah selanjutnya yaitu membuat variabel baru yang memuat image data dari kanvas2d yang sudah kita buat. Dengan parameter sebagai berikut:

kanvas2d.getImageData(x awal, y awal,lebar,tinggi);

[code lang="html"]//mengambil image data yg memuat data pixel. kita namai dengan variabel idata
            var idata=kanvas2d.getImageData(0,0,lebar,tinggi);

[/code]

Dalam script diatas kita ambil seluruh pixel gambar mulai dari koordinat 0,0.

Sekarang variabel idata memuat clamped array yang berisikan data pixel secara berurutan dari pojok kiri atas hingga pojok kanan bawah.
Masing masing pixel diwakili oleh 4 elemen dari array, dimana:

  • elemen pertama adalah angka desimal(0-255) nilai warna merah/red

  • elemen kedua adalah warna hijau/green

  • elemen ketiga warna biru/blue

  • elemen keempat nilai alpha/transparansi. dimana 0 artinya tidak terlihat sama sekali.


Contoh dari image data yang berisi 2 pixel warna merah dan biru:
255,0,0,255,0,0,255,255 yang dapat diakses melalui idata.data[0] untuk mengambil nilai merah pada pixel pertama jadi sangat sulit untuk menentukan pixel yg akan diolah. Kita perlu cara mudah untuk mengambil nilai satu pixel hanya berdasar kordinat yaitu dengan membuat sebuah fungsi.

Fungsi javascript untuk membaca pixel


Kita namai fungsi dengan nama getPixel, dan menerima 2 variabel parameter yaitu x dan y.

[code lang="html"]function getPixel(x,y){
//membuat array kosong untuk menampung hasil
var arr=Array();
//mengambil posisi pixel dari idata dalam variabel i dengan:
//membagi 4 hasil dari (y*lebar)+x
var i=((y*idata.width)+x)*4;

//masukkan 4 array dari posisi yang sudah ditemukan(i)
arr[0]=idata.data[i]; //warna merah
arr[1]=idata.data[i+1]; //warna hijau
arr[2]=idata.data[i+2]; //warna biru
arr[3]=idata.data[i+3] //transparensi/alpha

//kemudian return array yg memuat hasil
return arr;
}[/code]

Script diatas sudah saya beri comment untuk setiap baris yang saya rasa sudah dapat menjelaskan cara kerja dari fungsi diatas.

Untuk menguji fungsi yang telah dibuat tadi, buka javascript console pada browser dengan klik kanan lalu inspect element, lalu plih tab console. Dan jalankan fungsi diatas misalnya:

[code lang="javascript"]getPixel(0,0);[/code]

untuk mendapatkan pixel paling pojok kanan atas.Screenshot from 2015-08-25 16:16:26maka hasilnya akan seperti berikut:

Screenshot from 2015-08-25 16:19:32

Hasil dari getPixel berupa array yang berisi [67,91,17,255]. yang artinya pixel pada koordinat 0,0 memuat warna:

R/Red/Merah = 67

G/Green/Hijau = 91

B/Blue/Biru = 17

A/Alpha/Transparansi(0=Transparan, 255=Solid) = 255

Mari kita coba dengan koordinat lain misalnya 1,1:

Screenshot from 2015-08-25 16:20:30Artinya :

R/Red/Merah = 43

G/Green/Hijau = 62

B/Blue/Biru = 255

A/Alpha/Transparansi = 255

Script keseluruhan:

[code lang="html"]<html>
<head>
<title>Image processing menggunakan canvas dan javascript</title>

</head>
<body>
<img src=jeruk.jpg style=display:none; id=gambarSumber >
<canvas id=kanvasSumber ></canvas>
<script type=text/javascript>
//membuat variabel javascript yang memuat kedua elemen diatas.
var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');

//buat variabel yang memuat tinggi dan lebar gambar
var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;

//samakan tinggi dan lebar kanvas dengan gambar
kanvasSumber.width=lebar;
kanvasSumber.height=tinggi;

//membuat objek 2d dari canvas kemudian menggambar gambarSumber kedalam objek tersebut
var kanvas2d = kanvasSumber.getContext("2d");
kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);
var kanvas2d = kanvasSumber.getContext("2d");

//mengambil image data yg memuat data pixel. kita namai dengan variabel idata
var idata=kanvas2d.getImageData(0,0,lebar,tinggi);
//dalam kasus ini kita ambil seluruh pixel gambar mulai dari koordinat 0,0

function getPixel(x,y){
//membuat array kosong untuk menampung hasil
var arr=Array();
//mengambil posisi pixel dari idata dalam variabel i dengan:
//membagi 4 hasil dari (y*lebar)+x
var i=((y*idata.width)+x)*4;

//masukkan 4 array dari posisi yang sudah ditemukan(i)
arr[0]=idata.data[i]; //warna merah
arr[1]=idata.data[i+1]; //warna hijau
arr[2]=idata.data[i+2]; //warna biru
arr[3]=idata.data[i+3] //transparensi/alpha

//kemudian return array yg memuat hasil
return arr;
}

</script>
</body>
</html>[/code]

 

Sekian tutorial pengolahan citra dengan javascript bagian 2 tentang membaca data pixel. Pada tutorial selanjutnya akan saya bahas tentang mengubah data pixel dan me-render ulang gambar pada kanvas, dengan menggunakan library yang sudah saya sediakan.

Untuk video tutorial bisa anda saksikan di youtube:

Indeks tutorial pengolahan citra menggunakan html5 dan javascript:

2 comments :