Note: People say it isn't actually a watermark, the image appended can be called a "Caption" or "Hidden Subtitle". So in this post, when I say "watermark", it refers to the "Caption" or "Hidden Subtitle".
Nowadays I see many websites with image contents. Funny images, interesting images, cosplay, art and many more kinds of images. Many people don't want to hotlink or copy the image link and share it to any social networking site such as Facebook, instead they copy or download the image (using browser's "Save image as" option) and upload it to their own account without linking it to the source or website where they found it.
Nowadays I see many websites with image contents. Funny images, interesting images, cosplay, art and many more kinds of images. Many people don't want to hotlink or copy the image link and share it to any social networking site such as Facebook, instead they copy or download the image (using browser's "Save image as" option) and upload it to their own account without linking it to the source or website where they found it.
One solution websites do is to append a watermark on their images. The don't want this watermark to be shown on their website but they want it to appear when the user went to the actual image link or when this image was copied or downloaded.
An example website the does this is 9gag.com. When you see the image on their site, it does not have any watermark. But when you try to save the image, the watermark will appear, appended at the bottom part of the image, it is in white background.
- Append a watermark at the bottom part of the image using PHP
- Hide it using CSS
First, we need to prepare:
- Sample image - the image you want to put a watermark
- Watermark image - the image that will be put as watermark on the sample image
As for the sample image, we're going to use this image of my pets (yes, my pets):
 |
| Click to enlarge |
For the watermark image:
 |
| This will be appended on the main image |
Some notes:
- "sample.jpg" and "watermark.jpg" should be your variable
- PHP GD library should be enabled on your server
Our index.php, we are going to have the following code:
<?php //set the header header( "Content-type: image/jpg" ); //get image sizes first $image_size = getimagesize( "sample.jpg" ); $watermark_size = getimagesize( "watermark.jpg" ); $image_size_width = $image_size[0]; $image_size_height = $image_size[1]; $watermark_size_width = $watermark_size[0]; $watermark_size_height = $watermark_size[1]; //create images $main_img = imagecreatefromjpeg( "sample.jpg" ); $watermark = imagecreatefromjpeg( "watermark.jpg" ); //create canvas $canvas = imagecreatetruecolor( $image_size_width, //width of main image $image_size_height + $watermark_size_height //this is the new height, height of main image plus watermark image ) or die('Cannot Initialize new GD image stream.'); //set white background of canvas $bg = imagecolorallocate( $canvas, 255, 255, 255 ); imagefill ( $canvas, 0, 0, $bg ); //paste main image to the canvas imagecopymerge( $canvas, $main_img, 0, //main_img x coordinate ( distance from left side of main_img ) 0, //main_img y coordinate ( distance form top of main_img ) 0, //main_img x coordinate image ( distance from left side of main_img ) 0, //main_img y coordinate image ( distance from top side of main_img ) $image_size_width, //main_img width $image_size_height, //main_img height 100 //the opacity of main_img ); //paste the watermark image to the canvas imagecopymerge( $canvas, $watermark, 0, //watermark x coordinate ( distance from left side of main_img ) $image_size_height, //watermark y coordinate ( distance form top of main_img ) 0, //watermark x coordinate image ( distance from left side of watermark ) 0, //watermark y coordinate image ( distance from top side of watermark ) $watermark_size_width, //watermark width $watermark_size_height, //watermark height 100 //the opacity of watermark ); //show the new image imagejpeg( $canvas ); //if you want to save it to your server directory, just add the second param //something like: //imagejpeg($canvas, 'your_directory/new_img.jpg'); imagedestroy( $canvas ); imagedestroy( $main_img ); imagedestroy( $watermark ); ?>
The output image of the code above is this:
 |
| Click to enlarge |
Our page.php should have the following code:
<html> <head> <title></title> </head> <body> <div style='font-weight:bold; font-size:18px;'>The image below has a watermark, but it was hidden.</div> <div style='margin:5px 0;'>Try to go to the actual image by doing 'open image in new tab' or downloading it.</div> <div style='overflow:hidden;'> <!-- -30px here is the height of our watermark --> <img src='new_img.jpg' style='margin:0 0 -30px 0;' /> </div> </body> </html>
See the live demo for the output! :)
The Code of a Ninja Resources
For FREE programming tutorials, click the red button below and subscribe! :)
website