php: Menampilkan gambar/foto disertai watermark dengan GD Library

28 Jul 2009

Jika anda ingin menampilkan foto-foto karya pribadi di website anda, tentu foto-foto itu juga dapat diambil oleh pengunjung. Browser juga akan menyimpan gambar yang ditampilkan ke dalam harddisk pengunjung website.

Jika anda tidak mau foto karya anda dicomot begitu saja, maka anda perlu melindungi foto / gambar anda. Salah satu cara yang efektif untuk melindungi gambar/foto pada website adalah dengan menyertakan gambar watermark (baca: Tanda air) berupa tulisan, hakcipta atau logo dari pemilik foto.

Gambar dengan watermarkGambar 1. Foto yang sudah diberi watermark berupa logo dari pemilik foto.

Membuat watermark juga bisa dilakukan secara manual di program pengolah gambar seperti Photoshop. Namun hal ini kurang efektif untuk dilakukan terhadap puluhan atau ratusan gambar.

Maka dari itu kita perlu membuat aplikasi php yang akan melakukan tugas ini secara otomatis. Sebelum memulai terlebih dahulu kita persiapkan apa saja yang diperlukan:

  1. Sebuah foto yang ingin dilindungi.
    foto.jpg
    File: foto.jpg
  2. Sebuah gambar logo untuk dijadikan watermark. Menggunakan GIF atau PNG karena memiliki dukungan transparan.
    logo untuk watermark
    File: watermark.png
  3. GD Library extension. Mari kita bahas sekilas mengenai GD Library. Apakah GD Library? GD adalah serangkaian fungsi (kode) untuk memanipulasi gambar secara dinamis. GD umumnya dipakai untuk membuat atau mengolah gambar bagan, grafik, thumbnail, atau foto secara langsung. Format gambar/foto yang didukung antara lain PNG, JPEG, GIF, WBMP, dan XPM.Sebelum dapat menjalankan fungsi-fungsi manipulasi gambar di php, terlebih dahulu GD Library harus sudah terinstall dan sudah diaktifkan di konfigurasi php.Untuk memeriksa status extension GD Library, jalankan perintah phpinfo() seperti berikut ini:
    <?php phpinfo(); ?>

    Pastikan ada tulisan GD Support dengan status enabled.
    GD Support Enabled
    Gbr 2. Memeriksa ketersediaan GD Support (GD Support Enabled) dengan perintah phpinfo()
    Jika belum ada tulisan tersebut, coba sunting file php.ini, lalu temukan baris ini:
    ;extension=php_gd.dll

    Jika ada baris tersebut, hilangkan tanda titik-koma ( ; ) disebelah kiri menjadi:
    extension=php_gd.dll

    Simpan lalu restart web server Apache. Periksa kembali statusnya menggunakan perintah phpinfo() seperti yang sudah dijelaskan di atas.

    Jika GD Library masih belum bekerja, pastikan anda sudah memiliki file php_gd.dll atau php_gd2.dll di dalam folder lib (unix) atau folder ext / extensions (windows) pada php anda. Konfigurasi ini bisa berbeda selain dari folder yg sudah disebutkan di atas. Juga tergantung dari instalasi web server yg anda gunakan.

    Keterangan: Saya menggunakan XAMPP dan tidak ada kendala dalam mengaktifkan GD Library.

    Jika anda tidak memiliki filenya, donlot di http://www.php.net/gd atau http://www.boutell.com/gd/ serta cari informasi dari internet mengenai cara menginstall extension php GD.

  4. Setelah GD diaktifkan, saatnya membuat program php dengan kode berikut ini:
    <?php
    $main_img = "foto.jpg"; // file foto
    $watermark_img = "watermark.png"; // file watermark
     
    $padding = 4; // jarak watermark dari tepi foto (pixel)
    $opacity = 40; // kadar gambar watermark (semakin kecil semakin transparan)
     
    // membuka watermark
    $watermark = imagecreatefrompng($watermark_img);
     
    // membuka gambar utama
    $image = imagecreatefromjpeg($main_img);
     
    if(!$image || !$watermark) die("Error: File gambar utama atau watermark tidak dapat dibuka!");
     
    $watermark_size = getimagesize($watermark_img);
    $watermark_width = $watermark_size[0];
    $watermark_height = $watermark_size[1];
     
    $image_size = getimagesize($main_img);
    $image_width = $image_size[0];
    $image_height = $image_size[1];
     
    // watermark diletakkan di kanan bawah
    $dest_x = $image_size[0] - $watermark_width - $padding;
    $dest_y = $image_size[1] - $watermark_height - $padding;
     
    // watermark diletakkan ditengah
    //$dest_x = ($image_width/2) - ($watermark_width/2) - $padding;
    //$dest_y = ($image_height/2) - ($watermark_height/2) - $padding;
     
    // salin watermark ke dalam gambar utama
    imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $opacity);
     
    // tampilkan gambar di layar
    header(”content-type: image/jpeg”);
    imagejpeg($image);
    imagedestroy($image);
    imagedestroy($watermark);
    ?>

    Simpan file ini dengan nama: wm.php atau watermark.php (simpan di lokasi yang sama dengan file-file lainnya). Jika tidak ingin mengetik, donlot file yang sudah selesai di sini: wm.txt, jangan lupa rename ekstensinya menjadi .php.

Setelah selesai…. Jalankan wm.php di browser anda. Maka browser akan menampilkan foto yang sudah dilindungi dengan watermark. Silakan bereksperimen dengan posisi watermark yang paling anda inginkan.

Catatan: Di server, foto tetap tersimpan seperti aslinya tanpa watermark.

1 Tanggapan

  1. 1 Sandi 'tube' Andrian
    12-December-2009 pukul 17:22

    pas banget nih buat yang ane butuhin :D

Asupan RSS untuk tanggapan ke tulisan ini | URI Lacak balik (trackback)

Leave a Reply

Anda boleh menggunakan tag berikut:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>