Pengolahan citra dengan html5 dan javascript bagian 1: Menampilkan citra

Pengolahan citra atau image processing biasanya dilakukan menggunakan bahasa pemrograman compiler seperti C, Java, Pascal, dsb atau pemrograman yang dikhususkan untuk tujuan matematis seperti matlab dan scilab.

Namun seiring perkembangan teknologi, kini pengolahan citra juga bisa dilakukan dengan teknologi web yaitu menggunakan canvas html5 dan javascript.

Canvas adalah sebuah elemen yang hadir pada html5, yang berguna untuk menampilkan, objek grafis 2d. Dan tidak menutup kemungkinan untuk grafis 3d. Sedangkan javascript dalam kasus ini berguna sebagai bahasa pemrograman untuk membuat, mengolah, menampilkan, dan memanipulasi elemen canvas tersebut.

Kelebihan dan kelemahan

Kelebihan

Kelebihan teknologi web untuk pengolahan citra jika dibandingkan dengan teknologi konvensional diantaranya:

• Hampir bisa dijalankan dimana saja (selama ada browser yang mendukung html5).


• Tidak perlu compile (seperti web pada umumnya, tinggal edit dan refresh).


• Bisa dijadikan online (karena pada dasarnya merupakan halaman web biasa).


• Perkembangan teknologi cepat (mengikuti perkembangan teknologi web yang sangat pesat).


• Sangat banyak kemungkinan (bayangkan, desktop environment seperti gnome menggunakan javascript dan css, bahkan aplikasi android banyak yang mengandalkan basis web).

Kelemahan

Tentu saja cara ini juga memiliki kelemahan diantaranya :

• Kurangnya kemampuan untuk mengakses hardware langsung (karena berjalan diatas browser).


• Kemungkinan lebih lambat untuk prosesnya (karena resource seluruhnya diatur oleh browser, jadi performa antar komputer antar browser bisa saja berbeda).

 

Persiapan pembuatan aplikasi image processing

Kebutuhan

• Yang perlu disiapkan adalah komputer dengan sistem operasi (pasti :P)


• Webserver XAMPP atau terserah anda.


• Sebuah file gambar dengan ukuran tidak terlalu besar, sekitar 640x480 px sudah cukup besar.


• Text editor terserah anda, saya sarankan menggunaan geany atau notepad++.


• Browser terbaru (google chrome, mozilla firefox).

Persiapan

Install webserver dan pastikan bisa berjalan dengan baik.

Buat sebuah folder di htdocs dengan nama imageprocessing(nama bisa terserah anda), kemudian copy file gambar yg sudah disiapkan kedalam folder.

Buka text editor lalu buat sebuah file dengan nama index.html, dan simpan menjadi satu dengan gambar tadi dalam folder imageprocessing.

Isi file index.html dengan html dasar berikut kemudian simpan:

[code lang="html"]

<title>Image processing menggunakan canvas dan javascript</title>


<img src="jeruk.jpg" style="display:none;" id="gambarSumber">
<canvas id="kanvasSumber"></canvas>
<script type="text/javascript"></script>

[/code]

Penjelasan script diatas adalah:

Kita memuat file gambar jeruk.jpg menggunakan tag html img, kemudian sembunyikan gambar tersebut agar tidak tampil, lalu beri id gambarSumber untuk memanggilnya di javascript nanti.

Lalu buat sebuah elemen canvas dengan id kanvasSumber yang nantinya akan kita gunakan untuk menampilkan gambar menggunakan javascript sekaligus menjadi sumber citra untuk proses-proses selanjutnya.

Buat tag ;, bagi anda yang belum tahu.

Sekarang kita buat variabel yang memuat elemen img dan canvas, masing-masing kita namai gambarSumber dan kanvasSumber.

[code lang="javascript"]var gambarSumber=document.getElementById('gambarSumber');
var kanvasSumber=document.getElementById('kanvasSumber');[/code]

script diatas mengambil elemen html yang mempunyai ID gambarSumber kedalam variabel javascript gambarSumber dan ID kanvasSumber kedalam variabel kanvasSumber, menggunakan DOM (apa itu DOM? singkatan dari Document Object Model, bisa anda baca lebih lengkapnya di wikipedia).

Selanjutnya kita memerlukan tinggi dan lebar dari gambar sumber

[code lang="javascript"]var tinggi=gambarSumber.height;
var lebar=gambarSumber.width;[/code]

Lalu kita buat object context 2d dari elemen canvas

[code lang="javascript"]var kanvas2d = kanvasSumber.getContext("2d");[/code]

Lalu gambar gambarSumber kedalam canvas dengan fungsi drawImage.

[code lang="javascript"]kanvas2d.drawImage(gambarSumber,0,0,lebar,tinggi);[/code]

fungsi drawImage diatas membutuhkan 5 parameter yaitu: elemen gambar sumber, x awal , y awal , lebar gambar, tinggi gambar.

Sekarang akses melalui browser ke alamat http://localhost/imageprocessing/ . Jika sudah benar, maka akan tampil gambar kita tadi.



Jika kita inspect element, maka bisa dilihat bahwa yang tampil bukanlah elemen html image, melainkan sebuah canvas.

Setelah tahap ini, pengolahan citra bisa dilakukan dengan mengambil data dari canvas tersebut yang akan saya lanjutkan pembahasannya pada artikel lanjutan Pengolahan citra dengan html5 dan javascript bagian 2: Membaca data pixel.

Jika anda lebih suka tutorial berbentuk video step by step, bisa anda simak pada video berikut:



Script keseluruhan seperti:

[code lang="javascript"]

<title>Image processing menggunakan canvas dan javascript</title>



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

[/code]

Indeks tutorial pengolahan citra menggunakan html5 dan javascript:

• Pengolahan citra dengan html5 dan javascript bagian 1: Menampilkan citra


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


• Pengolahan citra dengan html5 dan javascript bagian 3: Manipulasi pixel dan render citra