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.

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

Read the rest of this entry »

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.