Image Processing GrayScale With PHP Programming

Image Processing GrayScale With PHP Programming

Programming Web Design

Khalid Lubis

12:00 PM

Selamat Datang di InfoSoftMikro, di artikel kali ini saya akan membagikan bagaimana membuat citra grayscale menggunakan bahasa pemograman PHP. Grayscale merupakan gambar yang sudah di ubah / di transformasi menjadi warna abu abu. Pada bidang Informatika teknik Grayscale sendiri terdapat di bagian ImageProcessing, dimana kita di haruskan mengubah citra menjadi sesuatu yang lebih baik, dengan menggunakan teknik/algoritma tertentu.

ImageProcessing saat ini mungkin banyak menggunakan Matlab, sebuah IDE/tools yang digunakan untuk membuat program citra, namun untuk kebutuhan Akademik biasanya tidak diperbolehkan(Mungkin karena terlalu mudah). Nah, dikesempatan ini saya akan membagikan bagaimana membuat program ImageProcessing Grayscale menggunakan bahasa pemrograman PHP tentunya berbasis WEB.

Sediakan terlebih dahulu software pendukung untuk menjalankan PHP diantaranya :

• XAMPP
• Sublime Text(Text Editor apa saja)
• Browser(Google Chrome/Mozile)

Bahasa yang digunakan untuk membuat Aplikasi Web Grayscale

• HTML,CSS (Desain Tampilan)
• JavaScript (Untuk membuat Function)
• PHP (ImageProcessing)

Pertama kita buat saja dulu tampilannya

Untuk CSS saya menggunkan dari materilize, jadi itu framework, kamu bisa gunakan yang sama atau bisa desain sendiri tampilannya yang menurut kamu bagus. Sedangkan di script paling bawah, kita masukkan javascript untuk function yang akan digunakan untuk processing image nanti nya. Silahkan cek Code di bawah untuk index.html

Oke, setelah tampilan index sudah, kita buat terlebih dahulu Function menggunakan javascript.
Pertama buat folder baru dengan nama js, dan sebuah file javascript dengan nama code.js. Disini kita akan buat dulu sebuah variabel yang akan di panggil ke PHP nanti nya, sebagai pengenalan img, dan warna RGB.

Setelah membuat variabel di javascript, langkah awal kita buat terlebih dahulu sebuah function yang akan memanggil 2 gambar di dalam 1 tampilan " Citra Asli, dan Edit Citra " dengan nama image2matrix 
Setelah membuat sebuah function untuk menampilkan 2 gambar pada frame, selanjutnya kita akan membuat sebuah function Grayscale. Function ini berfungsi untuk menentukan variabel dari RBG yang akan di proses melalui PHP nanti nya. 
Function sudah kita buat, sekarang kita tinggal membuat 2 file PHP sebagai proses untuk memanggil agar menampilkan 2 gambar, dan proses untuk membuat gambar menjadi grayscale.

Buat folder baru di dalam project kalian untuk menampung file PHP, sebagai contoh saya membuat folder function yang berisi file PHP.
Buat file baru dengan nama image2matrix.php sebagai penampung dari function yang sudah di buat dengan javascript

Setelah membuat file php diatas maka kita sudah bisa menampilkan 2 gambar seperti berikut :

Meskipun sudah, kita belum membuat proses untuk merubah citra menjadi sebuah grayscale.
Seperti yang kita tahu, untuk merubah sebuah citra menjadi grayscale bisa dilakukan dengan rumus:

R+G+B / 3

Jadi menentukan nilai rata rata dari RGB lalu di bagi menjadi 3, maka akan menghasilkan warna ke abu-abuan.
Untuk RGB dan warna tiap pixel sudah kita buat pada function di JavaScript. Jadi di PHP kita tinggal panggil function lalu menggunakan algoritma untuk menentukan grayscale pada object citra.
Maka Algoritma yang di dapat menjadi seperti berikut :

Setelah sudah berhasil membuat algoritma nya kita tinggal panggil variabel function dari javascript ke PHP. Maka hasil Code PHP dengan nama grayscale.php untuk Proses Grayscale seperti berikut ini :


Selanjutnya kita hanya tinggal menjalankan hasilnya pada gif berikut :

Untuk di Pengembangan aplikasi Image Processing di Web memang sedikit lebih rumit dibandinkan jika menggunakan VB, ataupun C# yang bisa menggunakan form untuk input gambar, karena sepenuhnya bisa di buat coding hanya menggunakan C#, bahkan di Matlab bisa jauh lebih mudah. Jika masih kesulitan kalian bisa download source code di bawah untuk di pelajari atau sebagai bahan referensi.(tapi ga mungkin juga daftar pustaka dari Blogspot :v )

Sekian dulu mengenai Grayscale di ImageProcessing, mungkin selanjutnya saya akan bagikan mengenai transformasi dan pengenalan pola di ImageProcessing menggunakan PHP tentunya :v
Download Link : Google Drive

Terima kasih yang sudah baca artikel saya yang sederhana ini, jangan lupa untuk share ke teman teman kalian yang sedang belajar ImageProcessing.

Khalid Lubis 12:00 PM