Freeola Home Get Dotted Domains Win Free Games Freeola Guides Freeola Customer Forum

Freeola Guides


Protecting Website Images With an Automatic Watermark

By on 20th December, 2017 | 0 Comment(s)

It's worth remembering that anything that people can display on their screen can be copied!

No clever stop right-hand click scripts etc. will prevent your images being stolen by others - the only effective way to protect your images is to put a watermark on them - either a graphic or text (or combination of both).

 

Even then images can be cropped or manipulated to remove your watermark - but it may leave your image obviously tampered with and will stop many people from bothering. It is better than doing nothing if your image copyright is important to you, it's also a simple way of branding images with your website address or logo not necessarily for image protection.

 

After a quick search you will see there are many auto-watermarking scripts freely available on the internet. 

I've picked a PHP script that's been published in a number of places that appears quite popular for my demonstration.

 

STEP 1 - The PHP Script

 

Save the following PHP code into a file called watermark.php

 

<?php
// this script creates a watermarked image from an image file - can be a .jpg .gif or .png file
// where watermark.gif is a mostly transparent gif image with the watermark - goes in the same directory as this script
// where this script is named watermark.php
// call this script with an image tag
// ##img src="watermark.php?path=imagepath"## where path is a relative path from the document root - such as subdirectory/image.jpg
$imagesource = $_SERVER['DOCUMENT_ROOT']."/".$_GET['path'];
if (!file_exists($imagesource)) die();
$filetype = strtolower(substr($imagesource,strlen($imagesource)-4,4));
if($filetype == ".gif") $image = @imagecreatefromgif($imagesource);
if($filetype == ".jpg") $image = @imagecreatefromjpeg($imagesource);
if($filetype == ".png") $image = @imagecreatefrompng($imagesource);
if (empty($image)) die();
$watermark = @imagecreatefromgif('watermark.gif');
$imagewidth = imagesx($image);
$imageheight = imagesy($image);
$watermarkwidth = imagesx($watermark);
$watermarkheight = imagesy($watermark);
$startwidth = (($imagewidth - $watermarkwidth)/2);
$startheight = (($imageheight - $watermarkheight)/2);
imagecopy($image, $watermark,  $startwidth, $startheight, 0, 0, $watermarkwidth, $watermarkheight);
header("Content-type: image/jpeg");
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
?>

 

STEP 2 - The Transparent Image

 

Create a transparent image in GIF  format to use as your watermark (transparent PNGs can also be used - see notes below) name the image watermark.gif

 

STEP 3 - The Web Page

 

Create your web page as normal and to automatically add watermarks to images just change the image <img> tag:

 

normal syntax: <img src="watermark/images/myphoto.jpg">

watermarked syntax: <img src="watermark.php?path=watermark/images/myphoto.jpg">

 

STEP 4 - Put it all together

 

For this demo I'm using a directory/folder called watermark - so just create that as normal using your favourite FTP client.

Your watermark.php (script) and watermark.gif (transparent image) files then need to be saved in the watermark directory.

 

NOTES:

 

To stop someone from looking at your HTML code and working out where your original images are stored and accessing an un-watermarked version directly, you need to add an .htaccess file to your watermark/images directory to protect it. I'm using this code:

 

RewriteEngine On
RewriteCond %{REQUEST_URI} !error.gif$
RewriteRule \.(gif|jpg|png)$ /error.gif [L]

 

If you would rather use a transparent PNG than a GIF then you can do this by simply changing the PHP script

$watermark = @imagecreatefromgif('watermark.gif');

to

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

You then place your PNG file in the watermark directory instead of a GIF.

 

Removing the /2 from the PHP script from the lines starting with $startwidth and $startheight will place the watermark in the bottom right of your original image. Using /2 places the watermark centrally.

 

I've created a simple demo showing the watermarks in use which can be viewed here: http://www.hmmm.ip3.co.uk/watermark I've used both GIF and PNG formats.


Did you find this article helpful?

Yes | No


Article Comments (0)
There are currently no comments on this article.
Add your comment:

Comments are limited to 750 characters, you have 750 remaining.

Freeola & GetDotted are rated

Check out some of our customer testimonials below:

Easy and free service!
I think it's fab that you provide an easy-to-follow service, and even better that it's free...!
Cerrie

View More Testimonials

Simple, yet effective...
This is perfect, so simple yet effective, couldnt believe that I could build a web site, have alrealdy recommended you to friends. Brilliant.
Con

View More Testimonials

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.