Advertise here with BSA

watermark.js is a JavaScript library that enables us to insert watermarks over images quickly and in batch.

It can target any number of images in a web page that has a specific class and apply the watermark over the original image with the help of HTML5 canvas.

The library normally aims to protect images from being stolen. Although, it is not a perfect solution (just like many others) as the image source is plain-coded, it can still prevent non-advanced users.

On the other hand, watermark.js is very handy when you only want to insert an image over another and position however you want without a server-side solution.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Protecting images online is a difficult, almost impossible, mission to accomplish. At the end, the image is there and a "print screenshot" command can grab it & no way to stop this.

But, there are various ways to harden the process & make it not worth trying like disabling right clicks, using images as backgrounds, adding watermarks to them & more.

Here are the good practices of these options:

Hide The Images

Put A Blank File Over The Real Image

This method will make the real image unreachable unless checked from the source.

You can use the original image as a background & put a transparent-blank file over it that matches the size of the real image.

For ex:

<div id="image1" style="background-image: url(originalImage.jpg);">
    <img src="blank.gif" height="250px" width="300px">
</div>

So, when the image is right-clicked, it will be the blank.gif that can be reached.

There are also 2 JavaScript framework ready solutions for this:

• dwProtector for MooTools
• dwProtector for jQuery

Auto-Slice The Images

Super Simple Image Tiles

This is a very effective image protection method.

An image is automatically sliced into pieces but presented as a whole. The original image is also hidden as watermarked.

Some serious disadvantages of this method are:

• adding a relatively more overload to the server as multiple requests will be made
• you’ll have lots of image files

Using Watermarks (Pre-Generated)

Adding a watermark to an image is an effective way of protecting images.

Besides the cons like:

• image not being presented clearly (there will be a watermark on it!)
• can be downloaded and cropped

as the source file is marked, there is no way to get the original image.

There are several solutions to watermark images with ease. From modifying it via Photoshop, GIMP, etc. to some web-based watermarking services like:

PicMarkr

A free service to watermark images online.

Multiple images can uploaded once or they can be grabbed automatically from Flickr.

It is possible to apply a text or an image watermark.

WatermarkTool

Another web-based free watermarking service.

You can upload images to be watermarked, customize the watermark text to be applied & download the updated images.

Using Watermarks (Generated Server-Side)

 It is possible to automate the watermarking process at the server level. Once applied, this is the easiest method to use.

To mention, implementing these methods require at least a bit of scripting knowledge.

Here are several libraries & examples for this:

Asido: PHP Image Processing Library

Asido is a PHP image processing library that can work with GD2, Magick Wand & Image Magick.

Here is a detailed information on watermarking capabilities of Asido.

Other PHP solutions:

• Put watermark on images using PHP
• Watermark your images with PHP 5 and GD
• Watermark images on the fly in PHP

ASP.NET Solutions:

• Thumbnail and watermark images on the fly with ASP.NET
• Watermarking Images in ASP.NET with an HttpHandler
• CoolWatermark (paid)

Ruby Solutions:

• RMagick
• Watermarking your images with RMagick

Use Flash To Show The Images

swfIR

swf image replacement displays images inside a Flash file which makes right-click impossible.

And, images can still be styled with CSS properties

On the other other hand the image source is mentioned at the source which again can not provide a total protection.

Browser Based Image Protection

Disable Right Click

Disabling right click via JavaScript is a way to start protecting images. But it is a simple step which can stop novice users as it is possible to disable JavaScript or get the path to the original image by reaching the source.

Is this a good method? Definitely no as you will be disabling all the right-click options like print, copying the link, etc. (updated 23 Jan 2009)

It may be a better solution to disable only save functions which this jQuery plugin can help.

Disable IE6 Image Toolbar

When an image is hovered for a while, IE6′s image toolbar appears automatically with an option to save the image. This can be disabled too.

Add the following code between the head tags of the webpage.

<meta http-equiv="imagetoolbar" content="no">

 Any more image protection solutions you want to share?

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Image processing is needed in almost every web application like creating watermarks, uploading & resizing avatars, cropping them & similar tasks.

Asido is a feature-rich image processing class for PHP that fits to any environment like GD2, Magick Wand and Image Magick. It supports both PHP4 & PHP5 (newer versions support only PHP5).

An example of adding a watermark to an image:

And the code:

<?php
include('./../../asido/dev/class.asido.php');
asido::driver('gd');
$i1 = asido::image(
      'the-source-image.jpg',
      'filename-with-which-you-want-to-save-the-result.png'
);
asido::watermark($i1, 'put-the-watermark-image-here.png');
$i1->save(ASIDO_OVERWRITE_ENABLED);
?>

It is really simple and clear.

Asido can:

• resize
• watermark
• rotate
• copy
• crop
• grayscale
• convert

images with ease. To develop faster, Asido is worth a try.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)