Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Tutorial PHP : Membuat Watermark Sederhana Dalam 5 Menit

image image

Merasa risih melihat gambar-gambar hasil editan Anda terpajang bebas di website orang lain? Kenapa tidak mencoba untuk menambahkan watermark berupa logo website atau teks tertentu pada gambar di website Anda? Bagaimana ya caranya? Tenang saja, ada cara cukup mudah membuat watermark sederhana menggunakan PHP. Yuk simak lebih lanjut tutorial berikut ini.

Sebelum membuatnya, persiapkan terlebih dahulu file dan direktorinya :

image

Gunakan file PNG untuk logo agar mendapatkan hasil yang bagus. Font bisa ditaruh di folder yang berbeda, sebagai contoh kita menggunakan font Gilsanub.TTF, Anda juga bisa menggunakan font lainnya sesuai yang Anda inginkan. Nah mari kita mulai untuk membuatnya.

Langkah 1 :

Untuk pertama kali tentukan logo watermark yang akan ditempelkan pada gambar nantinya. Serta tentukan juga judul teks yang ingin Anda pasang nanti. Kalau watermark yang ingin Anda buat berupa teks, tentukan juga ukuran fontnya serta jenis font.
<?php 
$text_show = "DISKUSIWEB"; // watermark text
$image_show = "logo.png"; // watermark image
$image_path = ($_GET['mode']=="img")? $image_show : $text_show;
$font_path = "GILSANUB.TTF"; // font
$font_size = 20; // contoh 20 = 20px
$path = "uploads/"; // folder upload gambar setelah proses watermark
?>


Langkah 2 :

Buatlah 2 fungsi berikut : watermark_image() dan watermark_text(). Fungsi ini bisa Anda gabung ataupun ditaruh di file php terpisah. Dalam contoh ini, kita akan menggabungkannya pada file php sebelumnya.
<?php
function watermark_image($oldimage_name, $new_image_name){
global $image_path;
list($owidth,$oheight) = getimagesize($oldimage_name);
$width = $height = 300; // tentukan ukuran gambar akhir, contoh: 300 x 300
$im = imagecreatetruecolor($width, $height);
$img_src = imagecreatefromjpeg($oldimage_name);
imagecopyresampled($im, $img_src, 0, 0, 0, 0, $width, $height, $owidth, $oheight);
$watermark = imagecreatefrompng($image_path);
list($w_width, $w_height) = getimagesize($image_path);
$pos_x = $width - $w_width;
$pos_y = $height - $w_height;
imagecopy($im, $watermark, $pos_x, $pos_y, 0, 0, $w_width, $w_height);
imagejpeg($im, $new_image_name, 100);
imagedestroy($im);
unlink($oldimage_name);
return true;
}
 
function watermark_text($oldimage_name, $new_image_name){
global $font_path, $font_size, $text_show;
list($owidth,$oheight) = getimagesize($oldimage_name);
$width = $height = 300; // tentukan ukuran gambar akhir, contoh: 300 x 300
$image = imagecreatetruecolor($width, $height);
$image_src = imagecreatefromjpeg($oldimage_name);
imagecopyresampled($image, $image_src, 0, 0, 0, 0, $width, $height, $owidth, $oheight);
$blue = imagecolorallocate($image, 79, 166, 185); // tentukan warna teks dalam RGB (255,255,255)
$shadow = imagecolorallocate($image, 178, 178, 178); // efek teks shadow
imagettftext($image, $font_size, 0, 70, 191, $shadow, $font_path, $text_show); // posisikan logo watermark pada gambar
imagettftext($image, $font_size, 0, 68, 190, $blue, $font_path, $text_show);
imagejpeg($image, $new_image_name, 100);
imagedestroy($image);
unlink($oldimage_name);
return true;
}
?>


Langkah 3 :

Buatlah form upload serta tampilan gambar hasil proses watermark. Untuk kali ini kita mengatur gambar contoh dalam ukuran 300x300px. Anda bisa mengubahnya ke ukuran aslinya atau ukuran yang lebih besar ataupun kecil.
<?php
$demo_image = "";
if(isset($_POST['createmark']) and $_POST['createmark'] == "Submit"){
$valid_formats = array("jpg","bmp","jpeg");
$name = $_FILES['imgfile']['name'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)&& $_FILES['imgfile']['size'] <= 1024*1024){ // 1024*1024 = 1 MB limit upload image
$upload_status = move_uploaded_file($_FILES['imgfile']['tmp_name'], $path.$_FILES['imgfile']['name']);
if($upload_status){
$new_name = $path.time().".jpg";
if($_GET['mode']=="img"){
if(watermark_image($path.$_FILES['imgfile']['name'], $new_name)) $demo_image = $new_name;
} else {
if(watermark_text($path.$_FILES['imgfile']['name'], $new_name)) $demo_image = $new_name;
}
}
}
} else { $msg="File size Max 1 M or Invalid file format supports .jpg and .bmp"; }
}
?>
 
<html>
<head>
<title>PHP Text Watermark</title>
<style type="text/css">
body{ width:800px; margin: 15px auto; padding:0px; font-family: arial}
</style>
</head>
<body>
<h1><?php
// navigasi Text / Image Watermark
echo ($_GET['mode']!="img")? "Text WaterMark | <a href='".$PHP['SELF']."?mode=img'>Image WaterMark</a>" : "<a href='".$_SERVER['PHP_SELF']."'>Text WaterMark</a> | Image WaterMark"; ?></h1>
<form name="imageUpload" id="imageUpload" method="post" enctype="multipart/form-data" >
<fieldset>
<legend>Upload Image</legend>
Image :<input type="file" name="imgfile" id="imgfile"/><br />
<input type="submit" name="createmark" id="createmark" value="Submit" />
</fieldset>
<?php
// tampilkan gambar di sini
if(!empty($demo_image))
echo '<br/><center><img src="'.$demo_image.'" /></center>';
else
echo '<h3>'.$msg.'</h3>';
?>
</form>
</body>
</html>


Langkah 4 :

Gabungkan semua kode di atas. Jika sudah benar, maka akan tampil seperti ini :

image


Cukup mudah bukan untuk membuatnya? Selamat mencoba :)

DOWNLOAD

(thePinkFighter)

Tanggapan

  • pusing gan..
  • Bagus banget artikelnya. mksh gan jadi nambah pengetahuan kita orang
  • Wow, keren, blehh..! Ngirit waktu, gak perlu lagi ngedit image satu2. Cm ekkeu ada masalah dikit, berhubung sering pake jpeg dan png, gmn cara bedainnya selain dari file extension. Bisa aja kansblm diaplod, gambar.jpg gw rename jd gambar.png. OOT yah? Sori deh kl gitu.
  • terima kasih sharingnya. keren.
    tapi bagaimana caranya supaya yang di resize hanya widthnya saja? sedangkan hight diseuaikan dari asli setelah diresize.
    trus kalau function yg digunakan hanya image sedangkan yang text tidak mau digunakan bagaimana ya?
    thx before
  • punya ane sudah berjalan dgn baik, tp kok ada notif gini an ya :

    Notice: Undefined index: mode in C:\xampp\htdocs\php-watermark\watermark.php on line 6

    Notice: Undefined index: mode inC:\xampp\htdocs\php-watermark\watermark.php on line 78

    Notice: Undefined variable: PHP inC:\xampp\htdocs\php-watermark\watermark.php on line 78
    Text WaterMark | Image WaterMark

    Upload ImageImage :

    Notice: Undefined variable: msg in C:\xampp\htdocs\php-watermark\watermark.php on line 90

    gmn solusinya ya gn? thanks
  • edited May 2013
    wah thx gan tips nya tpi kyk nya lebih enak pake potosop
  • makasih atassharenya.
    sekalian belajar
  • Dicoba dulu ntar ajari ya kalau ERROR,,,
  • edited May 2013
    Wah saran-sarannya mantep...

    Bisa dicoba nih


    Thank u Gan...
  • boleh di coba...
  • mantap, segera di bookmark dulu
Sign In or Register to comment.