Watermark image

Watermark image

Monday, July 23rd, 2007 in PHP

watermark Do you need to watermark your images? If so, do it the smart way. Put your mark on them by resizing the watermark. If you upload images having different sizes, you’ll love this. Read on.

Over the time I had clients that wanted to put a watermark on their images for copyright purposes. But there was a little problem. The watermark was too small on bigger images and too big on smaller ones. What to do… what to do?! Resize the watermark of course!

So let’s do that. In order to make things more simple, I created a function that does all that. Below you can check it out. The lines are commented to see how it works.

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
68
69
function watermark($original_image,$original_watermark,$destination="")
{
	/*
		create the image from out original image
	*/
	$image=imagecreatefromjpeg($original_image);
	/*
		get the image size for watermark resize if neccessary
	*/
	list($imagewidth,$imageheight)=getimagesize($original_image);
 
	/*
		create the watermark
	*/
	$watermark 	= 	imagecreatefrompng($original_watermark);
	/*
		determine the watermark width and height
	*/
	list($watermarkwidth,$watermarkheight)=getimagesize($original_watermark);
 
	/*
		if the watermark is bigger than the original image, we simply resize it
	*/
	if($watermarkwidth>$imagewidth || $watermarkheight>$imageheight)
	{
		/*
			some simple resize math
		*/
		$water_resize_factor = $imagewidth / $watermarkwidth;
		$new_watermarkwidth  = $watermarkwidth * $water_resize_factor;
		$new_watermarkheight = $watermarkheight * $water_resize_factor;
		/*
			the new watermark creation takes place starting from here
		*/
		$new_watermark = imagecreatetruecolor($new_watermarkwidth , $new_watermarkheight);
		/*
			imagealphablending is important in order to keep
			our png image (the watewrmark) transparent
		*/
		imagealphablending($new_watermark , false);
		imagecopyresampled($new_watermark , $watermark, 0, 0, 0, 0,
                                            $new_watermarkwidth,$new_watermarkheight,
                                            $watermarkwidth, $watermarkheight);
		/*
			assign the new values to the old variables
		*/
		$watermarkwidth  = $new_watermarkwidth;
		$watermarkheight = $new_watermarkheight;
		$watermark       = $new_watermark;
	}
	/*
		we establish the position of the watermark over the image
	*/
	$startwidth 	= 	($imagewidth 	- 	$watermarkwidth)  / 2;
	$startheight 	= 	($imageheight 	- 	$watermarkheight) / 2;
 
	imagecopy($image, $watermark, $startwidth, $startheight, 0, 0,
				$watermarkwidth, $watermarkheight);
	/*
		if we have a destination image, we save it on the server...
	*/
	if(!empty($destination))
		imagejpeg($image,$destination);
	/*
		... else we output the image
	*/
	else
		imagejpeg($image);
}

So, all what you need to do is specify the original image path, the watermark path (it has to be a PNG-24 image with or without transparent areas) and eventually the name of the brand new watermark image if you need to save it on your server. If you only need to output the image directly to the browser, simply use the function without the $destination variable.

Oh, and in case you want to save the images on your server instead of outputting them directly to the browser, make sure you have writing access to the folder where you need to put them ( chmod(“path_to_dir”,0777); ). But you might already know that.

Was this useful? Show your support.

digg Watermark image

12 comments

  1. Tonicstudio says:

    Interesting idea. And pretty compact code. Nice job.

  2. Raul says:

    Hi, excelent tutorial…but I have a problem with it, not about the coding, but the watermark isnt located always at the same point of the image, and when I get it located where I want (bottom), it just dissapear after applying on other image…why is this?. I resize all my images to be 450width or 450 heigh max.
    I would like to apply watermark to all my images at bottom or at side, not at center.

    Thank you and keep up the good work! ;)

  3. Raul says:

    Well I think it has something to do with the image height…when the image is 50×50 proportions, the watermark isnt just there, if the image has a height higher than the width, then the watermark and position keep where I want…this is very strange for me hehe, no idea where to start at. I made a script wich just resize the uploaded images from the user to 450 maximum heigh or width keeping proportions, after that resize is applied the watermark get into action.

    Any help is welcome to fix this :)
    Thank you and hope you had a great weekend!

  4. Hi Raul,
    You bet I had a great weekend. Fun and relaxation :). Hope it was the same for you. Now, about your problem:

    What you need is actually quite simple to achieve. All you need to do is change the following lines:

    $startwidth = ($imagewidth - $watermarkwidth) / 2;
    $startheight = ($imageheight - $watermarkheight) / 2;

    Those two values place your watermark on the image.
    If you need the watermark at the bottom of your images, just delete the division by 2 like this:

    $startwidth = ($imagewidth - $watermarkwidth);
    $startheight = ($imageheight - $watermarkheight);

    This will place the watermark at the bottom of your image, right aligned.
    If you need your watermark at the bottom but centered, you do it like this:

    $startwidth = ($imagewidth - $watermarkwidth)/2;
    $startheight = ($imageheight - $watermarkheight);

    And finally, if you need it at the bottom left corner, here goes:

    $startwidth = 0;
    $startheight = ($imageheight - $watermarkheight);

    The idea is very simple. You have to subtract the watermark height from the image height in order to place the watermark at the bottom. If you do not do that, your watermark will be placed somewhere outside the image, that’s why it disappear. Same goes with the width (except when you want to place the watermark on the left side, in that case as you can see we only need to make it 0, that means that our watermark starts at the coordinates 0,image_height-watermark_height values).

    If you have any more trouble please let me know.

  5. henry says:

    hi,

    having trouble with this, i am trying to watermark 230 ish pictures at once, and set the script to overwrite the original images by having the same directory for both the pre and post watermarked images.

    Any idea why it isnt working? error: The gateway did not receive a timely response from the upstream server or application.

    Or any suggestions as to how i can fix it?

    Thanks!!

  6. Moe says:

    Thanks, it is a good idea to keep origional image and watermark applied on images in the browser, I want to ask,

    1) Will this methos effect on server CPU, I’m using shared webhosting, you know there is limits on running some scripts that makes server overload,

    2) How can I use it to add an image outside the current Image, not on it, for example, I want to add an image 600×25 with black background and white text on it “Image Host: mysite.com”

    thanks,

    • Hi Moe,

      1. Yes, it will but how much depends on how much traffic you have on your website. But I recommend to actually create the watermarked image on your server and point to it instead of using the script to generate watermarked image for every user.
      2. You can’t with this script. Watermarking assumes you put something ON your image so it “can’t” be copied. You could place the watermark at the bottom of your image and in smaller letters if you want.

  7. Moe says:

    Hello,

    Thanks for reply, sometimes there is written copyright watermark on images, so I want to put the watermark note outside the image, currently I do it manually, I just want to display a note for who use images uploaded to my website on there pages. so I don’t lost bandwidth with out benefit. It is like advertising.

    There is functions in php to create png image, I think this is the solution. but it will be in png and needs to be converted to jpg.

    Regards,

  8. Em says:

    This code will watermark an image, applying transparency to the watermark.
    http://www.exorithm.com/algorithm/view/watermark_image

  9. Marino says:

    Hi Constantin,
    can you please tell me if image source folder can be the same as image destination folder?

    Perhaps if you could post an example with file paths included for PHP newbies like me

    Thanks

Leave a comment