Membuat Watermark pada Gambar yang diupload di Website

Berawal dari proyek kecil membuat web iklan rumah dan properti, jadi kepikiran bagaimana caranya agar gambar iklan yang diupload, secara otomatis menampilkan watermark (stempel paga gambar), seperti situs-situs iklan properti lain yang sudah terkenal.

Sebenarnya ada plugin yang bisa mengerjakan hal ini, tapi saya berusaha semaksimal mungkin menghindari penggunaan plugin kalau tidak benar-benar menemui jalan buntu. Berdasarkan riset dan sedikit otak-atik akhirnya ketemu dech caranya.

Pertama buat file watermark.png yaitu gambar tranparan yang akan dipakai sebagai watermark. Anda bisa pakai aplikasi photoshop untuk membuat gambar tersebut. Ingin tutorialnya , baca posting saya sebelumnya cara membuat gambar transparan

Buat file watermark.php , copy paste code di bawah ini ke file tersebut

<?php
//we tell the server to treat this file as if it wore an image
header('Content-type: image/jpeg');
//image file path
$img = $_GET['src'];
//watermark position
$p = $_GET['p']; if(!$p) $p = 'br';
/*
p can be anything from the following list:
tl = top left
tc = top center
tr = top right
cl = center left
c = center of the image
cr = center right
bl = bottom left
bc = bottom center
br = bottom right
*/
//watermarked image quality
$q = $_GET['q'];
//if the quality field is missing or is not on the 0 to 100 scale then we set the quality to 93
if(!$q || $q<0 || $q>100) $q = '93';
$filetype = substr($img,strlen($img)-4,4);
$filetype = strtolower($filetype);
if($filetype == ".gif") $image = @imagecreatefromgif($img);
if($filetype == ".jpg") $image = @imagecreatefromjpeg($img);
if($filetype == ".png") $image = @imagecreatefrompng($img);
if (!$image) die();
//getting the image size for the original image
$img_w = imagesx($image);
$img_h = imagesy($image);
//if the filename has 150x150 in it's name then we don't apply the watermark
if (eregi("150x150", $img)) {
    imagejpeg($image, null, $q); die();
} else {
    $watermark = @imagecreatefrompng('watermark.png');
}
/*
//if you want to use the watermark only on bigger images then use this instead of the condition above
if ($img_w < "150") {//if image width is less then 150 pixels
    imagejpeg($image, null, $q); die();
} else {
    $watermark = @imagecreatefrompng('watermark.png');
}
*/
//getting the image size for the watermark
$w_w = imagesx($watermark);
$w_h = imagesy($watermark);
if($p == "tl") {
    $dest_x = 0;
    $dest_y = 0;
} elseif ($p == "tc") {
    $dest_x = ($img_w - $w_w)/2;
    $dest_y = 0;
} elseif ($p == "tr") {
    $dest_x = $img_w - $w_w;
    $dest_y = 0;
} elseif ($p == "cl") {
    $dest_x = 0;
    $dest_y = ($img_h - $w_h)/2;
} elseif ($p == "c") {
    $dest_x = ($img_w - $w_w)/2;
    $dest_y = ($img_h - $w_h)/2;
} elseif ($p == "cr") {
    $dest_x = $img_w - $w_w;
    $dest_y = ($img_h - $w_h)/2;
} elseif ($p == "bl") {
    $dest_x = 0;
    $dest_y = $img_h - $w_h;
} elseif ($p == "bc") {
    $dest_x = ($img_w - $w_w)/2;
    $dest_y = $img_h - $w_h;
} elseif ($p == "br") {
    $dest_x = $img_w - $w_w;
    $dest_y = $img_h - $w_h;
}
imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $w_w, $w_h);
imagejpeg($image, null, $q);
imagedestroy($image);
imagedestroy($watermark);
?>

Tambahkan code berikut ini ke file .htaccess

RewriteRule (.*)wp-content/uploads/(.*) $1watermark.php?p=br&q=90&src=wp-content/uploads/$2

Upload ketiga file di atas ke root direktori web anda dimana terdapat folder wp-content, wp-admin, wp-include

Sekarang bisa dicoba…

Update : Anda bisa download file watermark.php dan contoh watermark.png di sini


15 responses to “Membuat Watermark pada Gambar yang diupload di Website”

  1. Teguh says:

    terima kasih gan, sudah saya coba dan bisa……

  2. korong says:

    Bisa lebih di jelaskan lagi dimana meletakan file watermark.php

    • Tom says:

      di root directory webnya mas korong, biasanya di folder public_html , kalau untuk web wordpress berarti di letakan berbarengan dengan folder wp-content , wp-admin , config.php …

  3. korong says:

    Saya sudah coba Lakukan tapi tidak berhasil, apa saya harus membuat file gambar.png? dan dimana meletakan file gambar.png nya?

    • Tom says:

      ya harus membuat file transparan dalam format PNG untuk membuat watermarknya, upload file PNG tersebut di root directory bersama file watermark.php

    • Tom says:

      coba dikirim gambar screenshot erornya gmana

      • korong says:

        Terima Kasih Atas Respon Anda, Masalah saya sama seperti ini:

        i am create watermark.php file and copy source to file
        and create empty png and watermark png and set to watermark.php
        and set rewrite code to htaccess
        but test it . and not show image in content. my image is broken .
        my image is default wordpress: wp-content/uploads

        test in firefox show error:
        The image “http://mysite.com/wp-content/uploads/2012/04/apple-firstquarter-earnings-report-2012.jpg” cannot be displayed because it contains errors.

        please help me for solve problem
        thank you

        • Tom says:

          Sorry, that is very common, not help me to solve the problem…
          Tapi bisa juga karna faktor hosting/server yg tidak mendukung, apa nyoba di localhost? coba jangan di localhost, langsung di website ONLINE, kalau sudah di web ONLINE, coba di hosting lain, tapi yg terpenting adalah cek kembali apakah sudah melakukan langkah2nya dengan benar

          I have replied your email, thanks

  4. jenkan says:

    mas, saya buat file watermark.php di dreamweaver cs6, trus copy code diatas.
    tapi, line 35, 37, 51,52,54,55,57,58,60,61,63,64,66,67,69,70,72,73,75,76. ada error, tulisannya begini";

    <tanda seru> there is a sytax error on line 35. code hintting may not work until you fix this errror",

    tulisan muncul dari dreamweavernya, itu gmn mas? apa nanti gak da masalah?

    • Tom says:

      sebetulnya cukup pakai program notepad, bawaan dari windows. itu murni teks, jadi hasil copasnya tidak akan membawa kode tambahan lain yg bisa menyebabkan eror. tapi selama saya pakai DW juga bagus asalkan ngopy nya benar. boleh dicoba dulu, kalau nanti eror silahkan download filenya langsung di artikel ini yang telah saya update

      makasih atas kunjunganan bro jenken di blog saya

      • jenkan says:

        terimakasih juga mas bro Tom… :D, nanti saya coba mudah-mudahan lancar…

        eh, saya boleh tanya hal lain gak ya? saya punya website lembaga yang CMS nya sepertinya dibuat sendiri oleh desainer awalnya. klo pake joomla saya lumayan ngerti. nah, yang ini jadinya harus edit php dan css nya mulu’ dari file manager untuk pengembangan website, karena CMS yang tersedia sebatas untuk input data, sementara untuk mengembangkan module gak bisa dari CMS. pernah pengalaman gak mas, seandainya buat CMS baru harus mulai dari mana? seberapa kemungkinan konflik antar CMS nantinya?

        • Tom says:

          ya kalau web develop sendiri biasanya memang tidak full CMS, bahkan tidak pake sistem managemen konten sama sekali. karna untuk bikin CMS yg mencakup seluruh aspek web mulai dari pengaturan, tampilan/template, halaman, artikel, media, dll memang tidak gampang, belum lagi jika web tersebut memerlukan fitur khusus dan penulisan codingnya juga dituntut berstandard keamanan internasional :)

          maaf mungkin saya TIDAK lebih pintar dari mas bro Jenkan, tapi kalau menurut saya sebaiknya pakai CMS yg kita tinggal pakai saja lah yg didukung oleh ribuan pengguna dan pengembang di seluruh dunia, seperti WP tidak hanya sekedar mesin blog tapi ini CMS yg biasa saya pakai untuk segala jenis web yg saya buat. yg lain ada joomla, drupal, auracms, dll…

  5. agel says:

    saya sudah ikuti step by step tapi ko masih belum bisa ya, ,,

  6. kalo di blogger bisa gak mas

Leave a Reply