So you want to watermark your images, how do you do this? In this technique we’ll show you how we serve our images with a watermark using PHP. We’ll be building on the Serve Resized Images with PHP tutorial we published previously, which explains basic re-size manipulation of your images.
Stepping through the code, we first get our previously created watermark 
using the imagecreatefrompng() PHP function, setting it to the variable $watermark for simplicity.
1 | $watermark = imagecreatefrompng('../images/watermark.png'); |
Next we determine the watermark image’s width and height.
1 2 | $watermark_width = imagesx($watermark); $watermark_height = imagesy($watermark); |
Since we want our watermark to appear in the bottom right of the original image, we’ll subtract the watermark image’s width and height from the original image’s width and height to determine it’s placement. We also subtract 5 pixels for a padded placement.
1 2 | $dest_x = $width - $watermark_width - 5; $dest_y = $height - $watermark_height - 5; |
Lastly we’ll actually apply the watermark image using the imagecopymerge() PHP function.
1 | imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100); |
Putting the watermark code together we get the following:
1 2 3 4 5 6 7 8 9 | //Set up Watermark $watermark = imagecreatefrompng('../images/watermark.png'); $watermark_width = imagesx($watermark); $watermark_height = imagesy($watermark); $dest_x = $width - $watermark_width - 5; $dest_y = $height - $watermark_height - 5; //Apply Watermark imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100); |
Adding the watermark code to our previous Serve Resized Images with PHP technique code we’ll have the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | include_once("/path/to/include/functions.phtml"); $img1 = "/images/" . urldecode(stripslashes($_GET[img])); if(!is_file($img1)) $img1 = "/nophoto.gif"; if(is_image($img1)){ //Send proper image header base on mime type $mime=get_mime($img1); header("Content-type: ".$mime); // Set dimensions, quality & variables $width = $_GET[w]; if(!$_GET[a]) { //it's a thumbnail request don't preserve aspect ($width) ? "" : $width = 100; ($width > 150) ? $width = 150 : "" ; $height = $width; $thmb_quality = 100; }else{ ($width) ? "" : $width = 300; ($width > 588) ? $width = 588 : "" ; $height = $width; $thmb_quality = 100; } // Get orig dimensions list($width_orig, $height_orig, $type_orig) = getimagesize($img1); $src_x=0; $src_y=0; if(!$_GET[a]){ //it's a thumbnail request, make it square from the center if ($width_orig < $height_orig) { $src_y=($height_orig-$width_orig)/2; $height_orig=$width_orig; }else{ $src_x=($width_orig-$height_orig)/2; $width_orig=$height_orig; } }else{ //keep aspect ratio but keeping width set from page $height = ($width / $width_orig) * $height_orig; } // Resample $image=imagecreatefrom($img1); $im = imagecreatetruecolor($width, $height); imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig); /*BEGIN WATERMARK CODE**************************************************************/ //Set up Watermark $watermark = imagecreatefrompng('../images/watermark.png'); $watermark_width = imagesx($watermark); $watermark_height = imagesy($watermark); $dest_x = $width - $watermark_width - 5; $dest_y = $height - $watermark_height - 5; //Apply Watermark imagecopymerge($im, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100); /*END WATERMARK CODE****************************************************************/ //Print Image image_same_type($img1,$im,$thmb_quality); image_cache_type($img1,$im,$image_path); } |
Now we simply call the image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO. Below we are calling an image that has the default 588pixel width/height, keeping the aspect ratio, using an image named “uwcmc.jpg” for our United Way of Cape May County client.
1 | <img src="http://camwebdesign.com/layout/thumb.php?a=y&img=uwcmc.jpg" alt="UWCMC" /> |
