Penggunaan fungsi G-D pada PHP

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Internet akan sangat membosankan tanpa gambar. Namun, mempertahankan dan memanipulasi ratusan atau ribuan gambar untuk situs web Anda bisa bikin sakit kepala. Saat desain situs Anda berubah, Anda mungkin perlu memodifikasi semua gambar Anda — misalnya, Anda mungkin perlu mengonversi semua gambar Anda ke skala abu-abu atau mengubah ukurannya menjadi 50% dari ukuran aslinya. Anda mungkin juga ingin mengkompres atau memotong gambar yang berbeda. Melakukan hal ini secara manual memakan waktu dan rawan kesalahan, tetapi dengan sedikit pengetahuan pemrograman, hal itu dapat dilakukan secara otomatis.

Dalam tutorial ini, kita akan belajar tentang GD (Graphic Draw) library di PHP. Anda akan melihat bagaimana library ini dapat digunakan untuk memanipulasi gambar dengan mengubah ukuran, memotong, memutar atau memfilternya.

Apa itu GD?

PHP dapat melakukan lebih dari sekedar melayani HTML kepada pengunjung. Misalnya, ia memiliki kemampuan untuk memanipulasi gambar. Tidak hanya itu, tetapi Anda juga dapat membuat gambar Anda sendiri dari awal dan kemudian menyimpannya atau menyajikannya kepada pengguna.

PHP dapat menangani hampir semua kebutuhan manipulasi gambar dasar Anda menggunakan GD library—kependekan dari Graphic Draw.

Mempersiapkan

Jika Anda bekerja pada Windows, Anda dapat menyertakan file php_gd2.dll sebagai ekstensi di php.ini. Jika Anda menggunakan sesuatu seperti XAMPP, Anda akan menemukan file php_gd2.dll di direktori xampp\php\ext. Anda juga dapat memeriksa apakah GD diinstal pada sistem Anda menggunakan fungsi phpinfo();. Jika Anda menggulir output yang dihasilkan, Anda akan menemukan sesuatu yang mirip dengan yang berikut ini.

Anda juga dapat mengunjungi persyaratan dan halaman instalasi untuk mempelajari lebih lanjut tentang proses instalasi.

Membuat Gambar Menggunakan PHP GD

Langkah pertama menuju manipulasi gambar menggunakan PHP adalah memuatnya ke dalam memori sebagai sumber gambar. Ini dapat dicapai dengan menggunakan fungsi yang berbeda untuk berbagai format. Semua fungsi ini memiliki nama yang sangat mirip sehingga mudah diingat.

Membuat Gambar Baru

Fungsi imagecreatetruecolor() akan terbukti bermanfaat jika Anda tidak memiliki sumber gambar asli yang ingin Anda manipulasi. Ia menerima dua parameter integer: width dan height. Ini akan mengembalikan sumber gambar jika semuanya berjalan sesuai rencana. Sumber daya gambar yang dikembalikan pada dasarnya adalah gambar hitam dengan lebar dan tinggi yang ditentukan.

Memuat File gambar

Jika Anda berencana memanipulasi gambar yang sudah disimpan di suatu tempat, Anda akan mendapat manfaat dari menggunakan fungsi seperti imagecreatefromjpeg(), imagecreatefrompng(), dan imagecreatefromgif(). Ini akan membuat sumber gambar dengan semua data dari file gambar yang dimuat. Fungsi-fungsi ini menerima satu parameter yang menentukan lokasi gambar yang Anda muat baik sebagai URL atau sebagai jalur file.

Membuat gambar dari String

GD library juga memungkinkan Anda untuk membuat gambar dari string menggunakan fungsi imagecreatefromstring() dalam PHP. Ingat bahwa Anda harus menggunakan base64_decode() pada string yang diberikan sebelum imagecreatefromstring(). Fungsi ini dapat secara otomatis mendeteksi jika jenis gambar adalah format JPG, PNG, GIF atau format lain yang didukung.

Putar, Skala, Potong, dan Balik Gambar

Beberapa operasi umum yang mungkin ingin Anda lakukan pada sumber gambar adalah rotasi, penskalaan, pemotongan, dan pembalikan.

Rotasi

Anda dapat memutar gambar yang sudah Anda muat di skrip menggunakan fungsi imagerotate(). Ini akan memutar gambar pada sudut yang disediakan menggunakan pusat gambar sebagai pusat rotasi. Sudut disediakan sebagai nilai float dan PHP menganggapnya sebagai nilai derajat untuk rotasi. Terkadang gambar yang diputar akan memiliki dimensi yang berbeda dibandingkan dengan versi aslinya. Ini berarti bahwa Anda akan berakhir dengan beberapa area yang tidak tertutup setelah rotasi. Parameter ketiga fungsi imagerotate() dapat digunakan untuk menentukan warna latar belakang area kosong setelah rotasi.

Penskalaan/scaling

Sangat mudah untuk menskalakan gambar menggunakan GD library. Anda hanya harus melewati sumber gambar serta lebar dan tinggi ke fungsi imagescale(). Jika Anda mengabaikan tinggi, GD akan menskalakan gambar ke lebar yang ditentukan sambil mempertahankan rasio aspek. Anda juga dapat menentukan mode untuk penskalaan gambar. Ini dapat disetel ke IMG_NEAREST_NEIGHBOUR, IMG_BILINEAR_FIXED, IMG_BICUBIC, dll. Satu hal penting yang perlu Anda ingat adalah bahwa fungsi ini mengembalikan sumber gambar berskala baru daripada memodifikasi yang asli.

Pemotongan/cropping

Anda dapat memotong sumber gambar apa pun menggunakan fungsi imagecrop() di GD. Parameter pertama adalah sumber gambar asli dan parameter kedua adalah array asosiatif dengan kunci x, y, width, dan height, yang menentukan dimensi posisi jendela pemotongan.

Gambar kupu-kupu di atas dipangkas menggunakan kode berikut:

$im_php = imagecreatefromjpeg('path/to/image');
$size = min(imagesx($im_php), imagesy($im_php));
$im_php = imagecrop($im_php, ['x' => $size*0.4, 'y' => 0, 'width' => $size, 'height' => $size]);
$im_php = imagescale($im_php, 300);

Pada dasarnya, kita menyimpan panjang sisi terkecil dalam variabel $size. Variabel ini kemudian digunakan untuk menentukan batas croping rectangle kita. Akhirnya, gambar diperkecil sedemikian rupa sehingga hanya memiliki lebar dan lebar 300 pixel. Ini memberi kita gambar persegi dengan ukuran yang tepat.

Membalik gambar

Gambar dapat dibalik secara horizontal, vertikal atau di kedua arah menggunakan fungsi imageflip(). Ini menerima sumber gambar yang Anda ingin flip sebagai parameter pertama dan mode flip sebagai parameter kedua. Mode flip dapat diatur ke IMG_FLIP_HORIZONTAL, IMG_FLIP_VERTICAL, atau IMG_FLIP_BOTH.

Gambar kiri atas pada gambar di atas adalah yang asli. Gambar kanan atas dibuat menggunakan IMG_FLIP_HORIZONTAL, gambar kiri bawah dibuat menggunakan IMG_FLIP_VERTICAL dan gambar kanan bawah dibuat menggunakan IMG_FLIP_BOTH. (Gambar burung gagak dari Pixabay.)

Menerapkan filter untuk gambar

GD juga memiliki fungsi imagefilter() yang sangat berguna yang dapat menerapkan filter pada sumber gambar berbeda yang dimuat menggunakan fungsi dari gambar sebelumnya. Fungsi ini dapat menerima berbagai parameter tergantung pada filter yang Anda terapkan.

Sebagai permulaan, tentukan sumber daya gambar dan nama filter yang ingin Anda terapkan. Anda dapat mengaturnya ke salah satu dari 12 jenis filter standar yang disebutkan dalam dokumen.

• IMG_FILTER_NEGATE: membalik warna pada gambar
• IMG_FILTER_GRAYSCALE: menghilangkan warna dari gambar
• IMG_FILTER_BRIGHTNESS: membuat gambar lebih terang atau lebih gelap
• IMG_FILTER_CONTRAST: meningkatkan kontras gambar
• IMG_FILTER_COLORIZE: mewarnai gambar ke warna yang dipilih
• IMG_FILTER_EDGEDETECT: highlights tepi gambar
• IMG_FILTER_EMBOSS: mirip dengan deteksi tepi, tetapi memberi setiap sisi tampilan yang ditinggikan
• IMG_FILTER_GAUSSIAN_BLUR: mengaburkan gambar menggunakan metode Gaussian
• IMG_FILTER_SELECTIVE_BLUR: mengaburkan gambar menggunakan metode selektif
• IMG_FILTER_MEAN_REMOVAL: efek untuk membuat gambar yang bergaya
• IMG_FILTER_SMOOTH: menghaluskan tepian bergerigi dalam gambar
• IMG_FILTER_PIXELATE: membuat gambar terlihat terpiksel

Beberapa filter seperti NEGATE, GRAYSCALE, EDGE_DETECT, dan EMBOSS tidak memerlukan data tambahan apa pun. Filter lainnya, seperti BRIGHTNESS, CONTRAST, dan SMOOTH dapat menerima parameter tambahan yang menentukan jumlah kecerahan, kontras, atau kelancaran gambar akhir. Parameter merancang memungkinkan Anda untuk menentukan parameter tambahan dua: ukuran blok serta modus pixelation. Akhirnya, COLORIZE filter menerima empat parameter yang menentukan nilai untuk merah, hijau, dan biru komponen serta saluran alpha.

Gambar di sebelah kiri atas adalah asli. Gambar kanan atas dibuat menggunakan COLORIZE filter, bagian kiri bawah dibuat menggunakan GRAYSCALE filter dan gambar di kanan bawah dibuat menggunakan filter kecerahan. (Gambar kupu-kupu ini ditemukan di Pixabay.)

Fungsi Manipulasi Gambar Berguna Lainnya

Anda juga harus tahu tentang beberapa fungsi GD umum lainnya yang berguna setiap sekarang dan kemudian.

Dapatkan Dimensi Gambar

Anda dapat menentukan lebar dan tinggi sumber gambar menggunakan fungsi imagesx() dan imagesy().

Fungsi lain yang disebut getimagesize() juga dapat digunakan untuk mendapatkan lebar dan tinggi dari suatu gambar bersama dengan jenisnya. Fungsi ini mengembalikan array dengan elemen yang menentukan lebar, tinggi, dan format gambar. Dua elemen pertama dari array menggambarkan lebar dan tinggi, dan elemen ketiga berisi konstanta yang menentukan format file: salah satu IMAGETYPE_PNG, IMAGETYPE_GIF, dll.

Menyimpan gambar

Setelah Anda membuat semua perubahan yang diinginkan pada suatu gambar, kemungkinan besar Anda ingin mengolahnya ke browser atau menyimpannya sebagai file. Dalam kedua kasus, Anda harus menggunakan salah satu fungsi output GD seperti imagejepg(), imagepng(), atau imagegif(). Anda akan melewatkan sumber daya gambar Anda ke salah satu fungsi output ini dan, jika Anda ingin menyimpan gambar ke file, Anda akan menentukan nama file juga. Anda juga dapat mengontrol kualitas gambar output menggunakan parameter opsional ketiga tergantung pada jenis gambar.

Mengubah ukuran semua Gambar dalam Direktori

Mari terapkan pengetahuan yang telah kita peroleh sejauh ini untuk melakukan sesuatu yang praktis. Di bagian ini, kita akan mengubah ukuran semua gambar JPEG dalam direktori tertentu untuk memiliki lebar 640 pixel. Ketinggian akan dihitung secara otomatis berdasarkan dimensi gambar asli.

Kita akan menyimpan gambar yang diubah ukurannya dalam folder baru berjudul Resized. Semua gambar asli dalam hal ini memiliki dimensi yang sama, tetapi kode akan berfungsi dengan baik dengan gambar yang memiliki semua ukuran dan rasio aspek yang berbeda.

$directory = 'Nature/';
$images = glob($directory."*.jpg");

foreach($images as $image) {
    $im_php = imagecreatefromjpeg($image);
    $im_php = imagescale($im_php, 640);
    $new_height = imagesy($im_php);
    $new_name = str_replace('-1920x1080', '-640x'.$new_height, basename($image)); 
    imagejpeg($im_php, $directory.'Resized/'.$new_name);
}

Dalam kode di atas kita mulai dengan menggunakan fungsi glob() untuk menemukan semua gambar dengan ekstensi .jpg di direktori berjudul Nature. File gambar disimpan dalam array dan kita mengulangnya satu demi satu.

Karena semua gambar yang ingin kita ubah ukurannya adalah JPEG, kita menggunakan fungsi imagecreatefromjpeg() untuk memuatnya ke dalam script. Fungsi imagescale() kemudian digunakan untuk mengubah ukuran gambar ke lebar tertentu - 640 pixel dalam kasus kita. Kita belum menentukan ketinggian tetap sehingga tinggi akan dihitung secara otomatis.

Setiap file gambar asli memiliki -1920x1080 ditambahkan ke nama file mereka untuk menunjukkan dimensinya. Kita menggunakan str_replace() pada nama file asli dan mengganti -1920X1080 dengan ukuran gambar baru.

Terakhir, kita menyimpan gambar yang diubah ukurannya dalam folder bernama Resized dengan nama file baru. Anda juga bisa meneruskan parameter ketiga ke fungsi imagejpeg() untuk mengatur kualitas file gambar yang disimpan. Jika parameter ketiga dihilangkan, gambar disimpan dengan kualitas standar 75.

Terapkan Filter Grayscale dan Contrast pada Setiap Gambar di Direktori

Kali ini kita akan menerapkan dua filter berbeda pada setiap gambar di direktori kita dan menyimpan hasil akhir di direktori yang berbeda tanpa membuat perubahan pada nama file. Mari selami kode itu dan saya akan menjelaskan apa yang dilakukan masing-masing fungsi nantinya.

$directory = 'Nature/';
$images = glob($directory."*.jpg");

foreach($images as $image) {
    $im_php = imagecreatefromjpeg($image);
    imagefilter($im_php, IMG_FILTER_GRAYSCALE);
    imagefilter($im_php, IMG_FILTER_CONTRAST, -25);
    $new_name = basename($image); 
    imagejpeg($im_php, $directory.'Grayscale/'.$new_name);
}

Seperti yang Anda lihat, kita memuat gambar dari direktori Nature persis seperti yang kita lakukan untuk contoh sebelumnya. Namun, kita akan menggunakan fungsi imagefilter() saat ini untuk menerapkan filter pada sumber daya gambar yang dimuat.

Perhatikan bahwa imagefilter() memodifikasi gambar asli dan mengembalikan TRUE atau FALSE berdasarkan keberhasilan atau kegagalan operasi. Ini berbeda dari fungsi imagescale() yang kita gunakan di bagian sebelumnya yang mengembalikan sumber gambar terskala.

Hal penting lainnya yang perlu diingat adalah filter kontras menerima nilai dari -100 hingga 100. Nilai negatif menyiratkan lebih banyak kontras dan nilai-nilai positif menyiratkan kontras yang lebih sedikit. Ini kebalikan dari apa yang diharapkan beberapa orang! Nilai 0 akan meninggalkan gambar untuk tidak berubah.

Filter kecerahan di sisi lain memiliki batas minimum dan maksimum -255 dan 255. Nilai negatif dalam kasus ini menunjukkan kecerahan minimum dan nilai positif menunjukkan kecerahan maksimum.

Kita mendapatkan nama file dari path file menggunakan fungsi basename() dan kemudian menyimpan gambar menggunakan fungsi imagejpeg().

Pikiran Akhir

Tujuan dari tutorial ini adalah untuk membuat Anda terbiasa dengan GD library di PHP dan belajar bagaimana menggunakan semua fungsi ini untuk membuat hidup Anda lebih mudah. Anda dapat menggunakan contoh di akhir tutorial sebagai panduan untuk menulis script manipulasi gambar Anda sendiri. Misalnya, Anda dapat mengubah ukuran gambar hanya jika lebih luas dari batas yang ditentukan dengan menentukan lebar menggunakan fungsi imagesx().

Semua fungsi ini membuka banyak kemungkinan untuk membuat manipulasi gambar lebih mudah dan menghemat banyak waktu pada akhirnya. Jika Anda memiliki pertanyaan terkait tutorial ini, tolong beri tahu saya di komentar.