Pengolahan citra(image processing) dengan canvas html5 dan javascript 1#: menampilkan citra

Опубликовано: 04 Август 2015
на канале: GemaCode

3,080

Tutorial pengolahan citra menggunakan html5 canvas dan javascript.
Bagian 1: menampilkan gambar/citra pada kanvas html5

Software yg digunakan:
-webserver (XAMPP)
-text editor (geany atau notepad++)
-web browser (google chrome)
-file manager

Step by step:
Pertama, buat direktori baru di htdocs misalnya imageprocessing..

Copy sebuah gambar dengan ukuran tidak terlalu besar, misalnya sekitar 640x480piksel.

Kemudian dengan software text editor. buat sebuah file dengan nama index.html

kemudian, melalui web browser. coba akses file tersebut. pastikan bahwa webserver xampp sudah bekerja dengan benar.

sekarang kita buat sebuah elemen img untuk memuat gambar.

lalu kita sembunyikan gambar tersebut agar tidak tampil dengan menggunakan rule css display:none;

berikutnya kita buat sebuah elemen kanvas yang nantinya akan digunakan untuk menampilkan gambar yang sudah dimuat tadi sekaligus menjadi citra sumber untuk proses-proses selanjutnya.

sekarang kita mempunyai 2 elemen yaitu img dan canvas. kita namai masing-masing elemen tersebut "gambarSumber" dan "kanvasSumber" dengan menambahkan attribut id.

selanjutnya kita buat script javascript untuk menampilkan gambar kedalam canvas.

gambar sudah bukan lagi berupa elemen img. melainkan canvas yang siap untuk diproses.

Source code bisa di ambil di http://asudahlah.com/2015/08/pengolah...