Image watermark with PHP and GD. Today is interesting tutorial for PHP. I will show you how to use GD library. And, main task today is adding watermark to image and generate result as PNG image into browser. We will using PHP and GD library. This is nice library to work with images at server side. Also (as additional tasks) I will draw little frame over image and will draw some text. Between, you can use this method (of adding watermarks in realtime) to protect original photos.
Live Demo
[sociallocker]
download in package
[/sociallocker]
Now – download the source files and lets start coding !
Step 1. PHP
Yes, today we will start directly from PHP step. Just because we don`t need anything – just generate result with PHP.
index.php
<?php if (! extension_loaded('gd')) { // small check - are GD installed or not echo 'GD not installed, please install'; exit; } $sOrigImg = "pic1.jpg"; $sWmImg = "watermark.png"; $aImgInfo = getimagesize($sOrigImg); $aWmImgInfo = getimagesize($sWmImg); if (is_array($aImgInfo) && count($aImgInfo)) { header ("Content-type: image/png"); $iSrcWidth = $aImgInfo[0]; $iSrcHeight = $aImgInfo[1]; $iFrameSize = 15; $rImage = imagecreatetruecolor($iSrcWidth+$iFrameSize*2, $iSrcHeight+$iFrameSize*2); // creating new true color image $rSrcImage = imagecreatefromjpeg($sOrigImg); // creating source image resource $rWmImage = imagecreatefrompng($sWmImg); // creating watermark image resource $aGrid[1] = imagecolorallocate($rImage, 130, 130, 130); // define colors for rectangular frame $aGrid[2] = imagecolorallocate($rImage, 150, 150, 150); $aGrid[3] = imagecolorallocate($rImage, 170, 170, 170); $aGrid[4] = imagecolorallocate($rImage, 190, 190, 190); $aGrid[5] = imagecolorallocate($rImage, 210, 210, 210); for ($i=1; $i<=5; $i++) { // our little frame will contain 5 rectangulars to emulate gradient imagefilledrectangle($rImage, $i*3, $i*3, ($iSrcWidth+$iFrameSize*2)-$i*3, ($iSrcHeight+$iFrameSize*2)-$i*3, $aGrid[$i]); // drawing filled rectangle } imagecopy($rImage, $rSrcImage, $iFrameSize, $iFrameSize, 0, 0, $iSrcWidth, $iSrcHeight); // copy image to main resource image if (is_array($aWmImgInfo) && count($aWmImgInfo)) { imagecopy($rImage, $rWmImage, $iSrcWidth-$aWmImgInfo[0], $iFrameSize, 0, 0, $aWmImgInfo[0], $aWmImgInfo[1]); // copy watermark image to main resource image } $iTextColor = imagecolorallocate($rImage, 255, 255, 255); // defining color for text $sIP = $_SERVER['REMOTE_ADDR']; // define guest ip imagestring($rImage, 5, $iFrameSize*2, $iFrameSize*2, "Hello guest from {$sIP}, {$sOrigImg} - ({$iSrcWidth} x {$iSrcHeight})", $iTextColor); // draw text imagepng($rImage); // output as png image } else { echo 'wrong image'; exit; } ?>
I added my comments quite anywhere, so I hope that you don`t will have any difficulties with my code. Shortly – firstly we checking source image info, if not empty – continue, then preparing new resource image with GD, after reading source image, after drawing our source image to prepared resource object. Then we applying watermark image (if its present), then determination visitor`s IP, and drawing some text on our resource object. In result – we drawing our resource object into browser as PNG image. Thats all.
Live Demo
Conclusion
I hope that today’s article was very interesting for you again. Welcome back our friends for new tutorials. Good luck in your work!
Really nice tutorial, thanks a lot!!!!!!!!!!!!!!!!
You have almost perfect tutorials and examples here…keep it up !
How to set opacity of watermark?
Hello, you can change it directly on your image, or you can try to use ‘imagecopymerge’
I tried this code and it really works very nice. Since I have a photography website, I created a page download.php and everytime someone tries to download some image from my website, I simply send the information as http://www.odisnaps.com/download.php?image=IMAGENAME and the new Image is created instantly with the watermark and text.
But it shows the image and when I try to save the image by right clicking on it, it shows the file as download.php.
Can I simply create the image and offer the visitor as a download instead of showing him the image ?
How do I do it ? Please help me…
Thank you.
Hi Jyot,
Try to send proper headers (which tells that your page has image format) in your download.php
very well..
How to set location of watermark?
I want to make a bubble spech, so I can control wherever the bubble and the text will be occure
Hello Galih,
You may define the coordinates in the ‘magecopy’ function