CODEWITHSUNDEEP
php.htaccesscgi
Michael Schinis
Michael Schinis

Reputation: 697

Add watermark to images

I've searched for ages for a solution, but I can't really find the solution to fit my needs.

So here's the story. Im creating a website and I really want to add watermarks to the downloaded images.

Yesterday I was browsing in a website called 9gag. If you haven't heard this website before, its a comic based website, and I found out that when you download an image, or access an image from anywhere else except their website, there's a 'watermark/banner' at the bottom of the image.

For example take this image: link , notice no banner at the bottom of the image.

If you right-click, 'Copy image URL' , you get this link: image . See the banner now?

Im very confused on how they do it, and it would be great if we could use this on our websites.

Anyone with any ideas? Is it using any type of CGI?

P.S: I Wasn't sure what tags to add, So if anyone knows a better tag combination, please do edit it.

Upvotes: 2

Views: 1497

Answers (3)

WoLfulus
WoLfulus

Reputation: 1977

GD library of php will help you doing that.

  1. You'll need to create a new image using imagecreate function but adding some more "space" to the original size. Example: if I have an image of 200x200 (which you can retrieve using gd functions too) you'll need to create a 200x220px image using that function

  2. Fill the new image with that gray color using imagefilledrectangle function

  3. Copy the original image into the new one using imagecopy

  4. Set the header's content type to image/type png gif etc..

  5. Output to the image using imagepng or any other function that has the format you want.

Upvotes: 1

Ben D
Ben D

Reputation: 14489

This effect is just a css trick. The image itself actually contains the watermark at the bottom, but the image tag is wrapped in a block that hides (overflow:hidden) the bottom 42 pixels of the image when it's being displayed in the page.

There are other things you can do that are more sophisticated (for instance, have the image served via a php script and comparing the http referer

header("content-type: image/jpeg");
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");};
$_u=parse_url($_SERVER['HTTP_REFERER']);
$_u=preg_replace("/(www.)/i","",strtolower($_u['host']));
$_i=$_SERVER['HTTP_HOST'];
$_i=preg_replace("/(www.)/i","",strtolower($_i));
if ($_u != $_i){
   //handle this with gd or redirect
}

) but this will only work if someone tries to load the image from a different website or if they go to the image url... generally save-as will save the image from the browser's cache, so the css trick might be the best option you have (or a combination of these options). Fundamentally keep in mind that anything you show on the web can be captured (the code above isn't foolproof, and you can always prtsc).

Upvotes: 4

Peter Gibbons
Peter Gibbons

Reputation: 103

I've had success with JQuery Watermark: Jquery Watermark

Upvotes: 0

Related Questions