Menggambar di PHP dengan GD Library -->
Home › ›

Menggambar di PHP dengan GD Library

Saturday, August 14, 2010
8/14/2010
Komentar

Baca Juga

Anda dapat menggambar images di PHP? Ingin memanipulasi images dengan PHP? Tentu bisa, dengan menggunakan GD Library anda dapat memanipulasi images dengan PHP. Jika anda sudah menginstall PHP anda dapat menggunakan fungsi-fungsi image di PHP untuk membuat gambar secara dinamis.

GD Library







GD Library merupakan sekumpulan tool untuk memungkinkan pengguna PHP membuat gambar secara langsung (on-the-fly). Anda dapat menemukan informasi lengkap mengenai GD Library di http://www.boutell.com/gd/. GD Library dapat menghasilkan format Portable Network Graphics (PNG) dan Joint Photographics Experts Group (JPEG). Versi terbaru dari GD Library tidak mendukung format GIF karena masalah lisensi.
Untuk menggunakan GD Library anda perlu menginstall GD Library pada PHP anda. Sebelum anda menginstall cobalah kode berikut ini:

ImageCreate(1,1);
?>
Kenapa tidak terjadi apa-apa? Apakah GD Library belum terinstall di PHP saya? Jangan panik dulu, jika tidak terjadi apa-apa berarti GD Library telah terinstall pada PHP anda. Fungsi diatas merupakan fungsi untuk meletakkan posisi images dan kita belum membuat images yang ingin diletakkan, sehingga tidak menghasilkan apa-apa. Tetapi jika muncul pesan error berarti GD Library belum terinstall pada PHP anda dan anda boleh panik :)

Install GD Library

Periksa phpinfo() dan pastikan GD support enabled. Jika masih disabled berarti GD Library belum aktif. Untuk mengaktifkannya bukalah file php.ini dan pada bagian dynamic extension carilah:
;extension=php_gd.dll
Aktifkan dengan cara menghapus tanda titik koma didepannya sehingga menjadi seperti ini:
extension=php_gd.dll
Restart web server anda. Jika GD Library masih belum bekerja, pastikan anda memiliki file php_gd.dll atau php_gd2.dll didalam folder lib pada PHP anda. Jika anda tidak memiliki filenya, downloadlah di http://www.php.net atau http://www.boutell.com/gd/

My First Images

Langsung saja kita coba kode dibawah ini:

header ("Content-type: image/jpg");
$image = ImageCreate (260, 30);
$background = ImageColorAllocate ($image, 69, 18, 121);
$color = ImageColorAllocate ($image, 233, 233, 233);
ImageString ($image, 40, 10, 5, "My first images...", $color);
Imagejpeg ($image);
?>
Hasil:

Latihan GD Library
Sebelum kita melakukan apapun dengan GD, kita perlu membuat image menggunakan fungsi ImageCreate(). ImageCreate() mengembalikan hasil image yang nantinya akan dimanipulasi oleh fungsi-fungsi lainnya.
ImageCreate (int x, int y) Tempat atau wadah dimana image yang dibuat akan disimpan, x dan y merupakan lebar dan tinggi image yang dihasilkan. Pada kode diatas image yang dihasilkan memiliki lebar 260px dan tinggi 30px yang hasilnya disimpan dalam variabel $image.
Sebelum browser dapat mengetahui anda akan mengirim image, anda harus mengirim header agar browser mengetahui tipe file. Dalam hal ini adalah image. Anda dapat membuat header dengan cara seperti ini:
header ("Content-type: image/png");
Ingat!! karena kita menggunakan header image maka kita tidak bisa menampilkan apapun selain images yang digenerate oleh GD Library.
Kita tidak akan melihat image sampai kita memanggil fungsi ImagePng() atau ImageJpeg(). Sebelum kita memanggil fungsi tersebut, GD akan menggunakan formatnya sendiri dan menyimpannya di memory. Kita akan menggunakan image dengan format PNG untuk tutorial ini, tetapi tentu saja GD dapat membuat dengan format lain seperti JPEG atau TIFF.
Setelah browser mengetahui bahwa kita membuat image, yaitu format PNG, maka image akan dirender dan kita memasukkan fungsi untuk menampilkan image dari memory ke browser.
ImageColorAllocate(int image, int red, int green, int blue)

Fungsi ini digunakan untuk memberi warna suatu image. Parameter pertama berisi wadah dimana image akan dibuat dan 3 parameter berikutnya merupakan warna RGB (Red, Green, Blue) yang berisi nilai antara 0-255. Pada kode diatas dibuat dua buah warna yaitu ungu gelap yang disimpan pada variable $background dan putih yang disimpan pada variabel $warna.
ImageString(int image, int font, int x, int y, string s, int color)

Fungsi ini digunakan untuk menggambar teks dengan parameter wadah image, ukuran, posisi x, posisi y, teks serta warna.
Setelah kita menggambar string pada image, maka kita telah siap mengirimnya ke browser. Fungsi ImagePng() berguna untuk mengirimkan gambar dari memory ke browser.

Menggambar garis, kotak, segitiga dan lingkaran

Pertama-tama cobalah kode berikut ini:

header ("Content-type: image/png");
$image = ImageCreate (150,150);
$background = ImageColorAllocate ($image, 00, 33, 99);
$color = ImageColorAllocate ($image, 206, 192, 233);
ImageRectangle($image,2,2,147,147,$color);
ImageFilledRectangle($image,4,4,30,30,$color);
ImageLine($image, 7, 50, 140, 140, $color);
Imagepng ($image);
?>
Hasil:

Contoh membuat kotak
Fungsi untuk menggambar kotak adalah ImageRectangle(), untuk menggambar kotak dengan warna didalamnya digunakan fungsi ImageFilledRectangle()
ImageRectangle(int image, int x1, int y1, int x2, int y2, int color)

Untuk menggambar kotak kita harus menentukan koordinat sudut kiri atas (x1 dan y1) dan sudut kanan bawah (x2 dan y2). Kita juga perlu mengisi parameter warna. Untuk menggambar kotak dengan warna didalamnya fungsinya mirip yaitu: ImageFilledRectangle(int image, int x1, int y1, int x2, int y2, int color)
Fungsi untuk menggambar garis adalah ImageLine(), yang menghasilkan garis dengan lebar 1pixel. Yang dibutuhkan untuk menggambar garis adalah koordinat titik posisi awal dan akhir.
ImageLine(int image, int x1, int y1, int x2, int y2, int color)

Parameter pertama tentu saja image tempat dimana garis akan digambar. x1 dan y1 merupakan titik koordinat awal untuk menggambar garis. x2 dan y2 merupakan titik koordinat akhir. Sehingga nanti hasilnya akan muncul garis dari titik koordinat awal ke titik koordinat akhir.
Coba kode berikut ini:

header ("Content-type: image/png");
$image = ImageCreate (150,150);
$background = ImageColorAllocate ($image, 00, 33, 99);
$color = ImageColorAllocate ($image, 206, 192, 233);
$coordinates = array();
$coordinates[0] = 0; // x1
$coordinates[1] = 150; // y1
$coordinates[2] = 150; // x2
$coordinates[3] = 150; // y2
$coordinates[4] = 75; // x3
$coordinates[5] = 75; // y3
ImageFilledPolygon($image, $coordinates, 3, $color);
ImageArc($image, 30, 30, 50, 50, 0, 360, $color);
Imagepng ($image);
?>
Hasil:

Contoh membuat objek
Disini kita membuat objek lingkaran dengan fungsi:
ImageArc(int image, int cx, int cy, int w, int h, int s, int e, int color, int style)

Untuk membuat lingkaran diperlukan 8 parameter. Parameter yang pertama seperti biasa merupakan image tempat dimana lingkaran akan digambar. Kemudian kita mendeklarasikan titik x dan y sebagai pusat lingkaran. Kemudian tinggi dan lebar lingkaran serta titik awal untuk menggambar lingkaran hingga akhir dalam satuan derajat.
Untuk menggambar objek selain yang tidak memiliki 4 sudut memerlukan metode yang lebih kompleks. Fungsi yang digunakan adalah ImagePolygon() dan

ImageFilledPolygon(). Fungsi ini dapat digunakan untuk menggambar bentuk apapun, disini kita akan menggambar segitiga sebagai contoh. Kita memerlukan sebuah variabel array untuk mendeklarasikan titik-titik dari tiap sudut yang akan dibuat. Fungsinya adalah seperti ini:
ImagePolygon(int image, array points, int num_points, int color)

Fonts

Untuk memberi teks pada image, fungsi yang digunakan adalah:
ImageTTFText(int image, int size, int angle, int x, int y, int color, string fontfile, string text)

Terdapat 8 parameter yaitu seperti biasa image, kemudian ukuran atau tinggi tulisan. Setelah itu kita dapat mengatur kemiringan dan posisi tulisan akan ditulis (x dan y). Warna tulisan, jenis font dan yang terakhir adalah teks yang akan ditulis. Untuk lebih jelasnya lihat contoh berikut ini:

header ("Content-type: image/png"); 
$image = imagecreate (140, 100);
$background = ImageColorAllocate ($image, 00, 33, 99);
$white = ImageColorAllocate ($image, 235, 235, 235);
ImageTTFText ($image, 20, 0, 10, 20, $white, "VeraSe.ttf", "Straight");
ImageTTFText ($image, 16, 340, 30, 50, $white, "VERDREF.ttf", "Slope");
ImagePNG($image);
?>
Hasil:

Contoh GD Library
Untuk contoh diatas anda harus memiliki file font VeraSe.ttf dan VERDREF.ttf pada direktori yang sama dengan letak script anda. Anda dapat mencobanya menggunakan file font lainnya.

Membuat tombol dinamis

Saya sudah mengajarkan mengenai dasar-dasar GD Library, sekarang kita akan membuat sebuah contoh menarik menggunakan GD Library, yairu membuat tombol secara dinamis. GD Library menggunakan header ("Content-type: image/png")yang berarti kita dapat memanggilnya sebagai images pada file HTML. Cobalah kode berikut ini dan simpan dengan nama button.php:

header ("Content-type: image/png");
$image = ImageCreate (120, 30);
$light = ImageColorAllocate ($image, 219, 234, 252);
$box = ImageColorAllocate ($image, 89, 119, 186);
$shadow1 = ImageColorAllocate ($image, 70, 98, 132);
$shadow2 = ImageColorAllocate ($image, 23, 46, 97);
$text = ImageColorAllocate ($image, 255, 255, 255);
$textoutline = ImageColorAllocate ($image, 21, 53, 154);
ImageFilledRectangle($image,0,0,120,30,$box);
ImageFilledRectangle($image,1,1,117,27,$light);
ImageFilledRectangle($image,2,2,120,30,$shadow2);
ImageFilledRectangle($image,2,2,119,29,$shadow1);
ImageFilledRectangle($image,2,2,117,27,$box);
ImageTTFText ($image, 10, 0, 39, 19, $textoutline, "Verdana.ttf", "$content");
ImageTTFText ($image, 10, 0, 40, 18, $textoutline, "Verdana.ttf", "$content");
ImageTTFText ($image, 10, 0, 41, 19, $textoutline, "Verdana.ttf", "$content");
ImageTTFText ($image, 10, 0, 40, 20, $textoutline, "Verdana.ttf", "$content");
ImageTTFText ($image, 10, 0, 40, 19, $text, "Verdana.ttf", "$content");
Imagepng ($image);
?>
Anda telah mempunyai alas/background tombolnya. Sekarang tulis kode berikut dan simpan dengan nama show.php:

echo "";
echo "";
?>
Jalankan show.php dan inilah hasilnya:

Tombol dinamis dengan GD Library
Bagaimana? anda membuat tombol tanpa menggunakan Photoshop, hanya menggunakan PHP. Masih banyak contoh-contoh penggunaan GD Library anda dapat bereksperimen sendiri. Selamat mencoba...