Watermark Images on the Fly in PHP

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "Watermark Images on the Fly in PHP"

[ToolboxTech]

Two words: Thank you

[cianuro]

That is one of the best articles I have read in watermarking. Excellent resource. Thank you very much.

[DocDave]

Great Article. I love the ability to watermark in PHP. I have been using it for a while now. Works great! Here is an example of the output is creates:

The logo and Copyright info is the Watermark.

[Chillijam]

DocDave,

Any chance you could post the code you actually use, please? I still haven't managed to sort out my issues, mainly because I have very little time to do it.

TIA
CJ

[DocDave]

Ok here you go, the variable $photo_file is the file that was uploaded earlier in the routine. There is other stuff in the routine to size the image and what not. Hope this helps.

// Get the uploaded photos dimensions

$photo_size = getimagesize($photo_file);

$photo_width = $photo_size[0];

$photo_height = $photo_size[1];



// Create an image from the uploaded jpg

$photo_image = imagecreatefromjpeg($photo_file);

            

// Turn on Alpha Blending for the uploaded jpg

ImageAlphaBlending($photo_image, true);

            

// Check that the uploaded photo's width is larger than the 

// requested fullsize photo width, otherwise use the original width

if ($photo_width > $INFO['max_img_width'])

{

        $pic_width = $INFO['max_img_width'];

}

else

{

        $pic_width = $photo_width;

}

            

// Calculate the the fullsize photo height based on the width

$pic_height = round($photo_height / ($photo_width / $pic_width));

            

// Create the new image

$pic_img = imagecreatetruecolor($pic_width,$pic_height);

            imagecopyresized($pic_img,$photo_image,0,0,0,0,$pic_width,$pic_height,$photo_width,$photo_height);

            

// Define the watermark png file

$logo_file = $INFO['server_path']."/".$INFO['gallery_dir']."/htm/watermark.png";

            

// Get the logo dimensions from the file

$logo_size = getimagesize($logo_file);

$logo_width = $logo_size[0];

$logo_height = $logo_size[1];

            

// Create an image from the watermark png file

$logo_image = ImageCreateFromPNG($logo_file);

            

// Copy watermark logo image onto the photo image

ImageCopy($pic_img, $logo_image, $INFO['mark_x'], $INFO['mark_y'], 0, 0, $logo_width, $logo_height);



// Define the location of the jpg file to be created

$pic_file = $INFO['server_path']."/".$INFO['gallery_dir']."/pic/".$save_as_name;

            

// Create and store a jpg at the fullsize pic quality from the resized image created

imagejpeg($pic_img, $pic_file, $INFO['img_quality']);



// Clean-up any other left over images

ImageDestroy($photo_image);

ImageDestroy($logo_image);

ImageDestroy($pic_img); 

[Chillijam]

Perfection! Thanks Dave

[SharifTK]

Would anyone care for a function to use during image upload?

[inversec80]

Thats how my orignal code looks like


/////////// ////Snapshot creation //////////////////////////////

if (!file_exists("$site_dir/" . "snap_$userfile_name"))
{
$thumb->size_auto(416);
$thumb->jpeg_quality(60);
$thumb->save("$site_dir/snap_$userfile_name", $gd_version);

$image_src = $site_dir . "snap_$userfile_name";

header('content-type: image/jpeg');

$watermark = imagecreatefrompng('watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($image_src);
$size = getimagesize($image_src);
$dest_x = $size[0] - $watermark_width - 5;
$dest_y = $size[1] - $watermark_height - 5;
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);

$thumb=new thumbnail("$site_dir/$userfile_name");

}

[inversec80]

thumbnail is successfully created but with no watermark and that what i get after uploading

ÿØÿàJFIF



ÿþ>CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), default quality ÿÛC    $.' ",#(7),01444'9=82<.342ÿÛC
 2!!22222222222222222222222222222222222222222222222222ÿÀ
8

"

ÿÄ









[GrobarPFC]

YOu can use 24-bit transparencu with this code if you change one line of the code

imagecopymarged($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100); 

to

imagecopyresampled($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $watermark_width, $watermark_height); 

This works fine. If you wanna know more about this function
imagecopyresampled()

[ajferg]

Howdy,

Fantastic script, thanks!

tonywhite, by default you call it with watermark.php?src=car.jpg - see, 'SRC', not 'IMAGE'. Looks like a few other people had that problem also.


I made an upgrade to the script to better suit my needs:
I don't want to have to call the image like <img src="watermark.php?src=...."> - I would prefer to do a regular call.

So, my server setup is this:
Images get uploaded into a folder called 'upload_img'. Thumbnails are auto-generated on upload- same filename, just with a 'th_' prefix. I don't want to watermark the thumbnails. Here's what I did:

Step 1: .htaccess

RewriteEngine on
RewriteCond %{REQUEST_URI} upload_img(.*) [NC]
RewriteRule ^(.*)$ http://www.domain.com/watermark.php?src=$1 [NC]

This tells the server to direct any request for a file in the 'upload_img' folder through the watermark.php handler.

Step 2: ignore th_ files
Modify the php file to have an if/else statement using strpos for the filename. eg,

if (strpos contains 'th_') { 
   show raw image 
} else { 
   run the script 
}

Tada!
Now all my existing image calls still work without needing modification. I don't need to include 'watermark.php?src=...' in my <img> tags (so users can't view source to see what i'm doing). Public users simply CANNOT access the raw image without the watermark anymore (due to the .htaccess). And it leaves my thumbnails alone.

Hope that helps someone.

[superduperdonke]

Originally Posted by ajferg

Howdy,

Fantastic script, thanks!

tonywhite, by default you call it with watermark.php?src=car.jpg - see, 'SRC', not 'IMAGE'. Looks like a few other people had that problem also.


I made an upgrade to the script to better suit my needs:
I don't want to have to call the image like <img src="watermark.php?src=...."> - I would prefer to do a regular call.

So, my server setup is this:
Images get uploaded into a folder called 'upload_img'. Thumbnails are auto-generated on upload- same filename, just with a 'th_' prefix. I don't want to watermark the thumbnails. Here's what I did:

Step 1: .htaccess

RewriteEngine on
RewriteCond %{REQUEST_URI} upload_img(.*) [NC]
RewriteRule ^(.*)$ http://www.domain.com/watermark.php?src=$1 [NC]

This tells the server to direct any request for a file in the 'upload_img' folder through the watermark.php handler.

Step 2: ignore th_ files
Modify the php file to have an if/else statement using strpos for the filename. eg,

if (strpos contains 'th_') { 
   show raw image 
} else { 
   run the script 
}

Tada!
Now all my existing image calls still work without needing modification. I don't need to include 'watermark.php?src=...' in my <img> tags (so users can't view source to see what i'm doing). Public users simply CANNOT access the raw image without the watermark anymore (due to the .htaccess). And it leaves my thumbnails alone.

Hope that helps someone.

I am trying to use this cool code in my .htaccess file, but my server keeps giving me back Http Error 500.

Would you kindly explain how I could get this to work? I have a bunch of listings on eBay and would like to watermark all the images.

Thanks!

[superduperdonke]

nevermind, got it sorted...the problem was that I had put all the files in my images directory. Moved them to root and we are good to go.

Thanks all!

[allstar]

I find if you are going to create a png image with php's gd libary extension you should tell the browser that your creating a png image. Otherwise you might end up with something bad outputed. So, instead of doing image/jpeg as the header information do a image/png or an image/x-png. Also, I know that the gd libary can't change the file type of an image. If it is read in as a .png it will only be able to be outputed as a png, same with the other formats. I noticed the article said that *.gif support did not work in 2.0+ gd. Yes, it does work. It just doesn't support animated .gif files. It has to be static .gif files.
Now, for a more robust error proof way of reading in the images then you should look towards checking the mime type of he image then do a switch or if then statements to set the proper imagecreatefrom* with the mime type of the image.

I made comments to the listed code example. I know the comments and code isn't 100%, but correct me where you can and help out with this.

name: watermark.php
call by: watermark.php?photofile=name_of_png_image.png

<?php

/*

orginal image need to be bigger then the watermark image

orginal image and watermark image needs to be a .png file type

Either a .htaccesss file or aphache has to be setup to output this .php file as a image file.

*/



//read in the varibles from command line

$photofile = $_GET['photofile'];



/* read the watermark image into memory. This would be a good place to detect the mime of the photofile and setup a switch to create the rigth type of image from it. */

$watermark = imagecreatefrompng('watermark.png');



/* get the width and height of the watermark image. */

list($watermark_width,$watermark_height) = getimagesize('watermark.png');



/* read in the photofile into memory.  Another good place to setup a mime type switch to create the right image from the detected mime type. */

$image = imagecreatefrompng($photofile);



/* this does the x,y position of the watermark need to cover the orginal image */

list($img_w,$img_h) = getimagesize($photofile);

$dest_x = $img_w - $watermark_width - 5;

$dest_y = $img_h - $watermark_height - 5;



/* save the transparentcy of the orginal image. */

imagealphablending($image, false);

imagesavealpha($image,true);



/* copy the watermarked image onto the orginal image. */

imagecopyresampled($image,$watermark,0,0,0,0,$dest_x,$dest_y,$watermark_width,$watermark_height);



/* output the image.  Great place to setup a mime switch to output the correct content type message */

header("Content-Type: image/png");

header("Content-Disposition: filename= " . $photofile);

imagepng($image);



//free up the memory used

imagedestroy($image);

imagedestroy($watermark);

?>

[tvds]

allstar .....Correct me if I am wrong.... but I can not use a PNG watermark with JPG files ?

When I use your code and I use a PNG watermark and a PNG photo... then it works....

But I do want to use JPG files.

Well still like to get working files (incl watermark.png and jpg) in zipped file

[tvds]

Guys .... don't ask me why... but I've got it working !!

Thanxs for all the help !

T

[allstar]

Originally Posted by tvds

allstar .....Correct me if I am wrong.... but I can not use a PNG watermark with JPG files ?

When I use your code and I use a PNG watermark and a PNG photo... then it works....

But I do want to use JPG files.

Well still like to get working files (incl watermark.png and jpg) in zipped file

That is why I said to use a switch to detect what the mime types of the files are. .jpg files are not made to be transparent like .png/.gif files are. So, your watermark is going to have the black stuff to it. If your orginal file was a .jpg and your watermark is a .png/.gif then it would work, because the .png can have transparent parts to it. Though the final image will not, because it will be a .jpg file. The example is just the basic structure to do the task for .png files.

[c1l1t]

Is there a way to save the watermarked $image to a file? I tried using fopen and fwrite, but they didn't work.

[rwduc]

Ok ! I have used it. But why I use "Watermark" is PNG file but it is opaque.
Plz help me !
Thanks.

[Nexeo]

This does not work in the new firefox 2 for some reason, what the hell? Isn't it all server-sided???

[kaloyan]

I know this is an old thread, but for all of you who want to apply watermarks on the fly, you might want to check the open-source project Asido: there are a lot of useful features when creating applying watermarks, like tile watermarks or watermark scaling. There's no problem at all using transparent images both as watermarks or as images that are about to be watermarked. Here's a brief example copied from Asido website:

<?php
 
/**
* Include the main Asido class
*/
include('./../../class.asido.php');
 
/**
* Set the correct driver: this depends on your local environment
*/
asido::driver('gd');
 
/**
* Create an Asido_Image object and provide the name of the source
* image, and the name with which you want to save the file
*/
$i1 = asido::image('example.jpg', 'result_01.jpg');
 
/**
* Put a watermark image 
*/
Asido::watermark($i1, 'watermark_01.png');
 
/**
* Save the result
*/
$i1->save(ASIDO_OVERWRITE_ENABLED);
 
?>

You can see the results here: http://www.asido.info/howto/watermark/gravity/

[colinmcc]

I too failed to get the origional script to work... But after reading all your posts today about asido, I downloaded asido this afternoon from soundforge and hey! It works!!

The only thing it did that confused me was it made my watermark way smaller, but digging through the examples I found that by default it reduces the watermark to 25%. This reduction can be eliminated by adding:--

, ASIDO_WATERMARK_SCALABLE_DISABLED

and, even neater, a custom scale can be added, for example 66%:-

, ASIDO_WATERMARK_SCALABLE_ENABLED, 0.66

If you want to watermark images then give asido a try.

[kaloyan]

Originally Posted by colinmcc

...

The only thing it did that confused me was it made my watermark way smaller, but digging through the examples I found that by default it reduces the watermark to 25%

Yeah, indeed the default behaviour is to have the watermark scaling ON and 1/4 scaling factor, and this is because in most cases you don't need your watermark to be bigger then the image you are watermarking. Anyway, I am glad that you find Asido useful, and even more that you find the information on the website is helpful - I don't want to be one of those open-source projects that lack comprehensible documentation.

Recently I've been thinking about how to improve the watermark scaling. Right now the scale factor is applied to the watermark image without any regard to the image being watermarked. Let me show you an example: you have an image that is 100x100, and you have a watermark that is 800x800; since the watermark is bigger, the watermark scaling will try to reduce it by the defautl scaling factor, which 0.25 (1/4), so the watermark will become 200x200 and it will be still bigger than the image that's about to be watermarked. The solution
is to tie the scaling factor not to the dimensions of the watermark, but to the dimensions of thre image, so when the scaling factor is 1/4, this means that the watermark will become 1/4 from the size of the watermarked image. Using 100% (1.0) as scaling factor will cover the whole image w/ the watermark. Anyway, I don't want to drop the way the scaling is applied right now, so probably there will be a new "mode" for the scaling, and the available options will be: ASIDO_WATERMARK_SCALABLE_DISABLED, ASIDO_WATERMARK_SCALABLE_ENABLED_TARGET (current implementation) and ASIDO_WATERMARK_SCALABLE_ENABLED_SOURCE (the feature I just explained)

[jellen]

I usually use programm to resize my pictures,then upload the pictures to my host!Batch Watermark Creator is a good choice,That's the one I know how to use.visit the on-line places and search it;