MooTools 1.2 Image Protector: dwProtector
Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image protector class to help designers and artists protect their images. Here's how it helps:
- Prevents right-click "Save Image As".
- Prevents dragging an image to the desktop.
- Prevents right-click "Save Background As".
- Prevents right-click "View Background Image"
All I needed was a small MooTools script.
The MooTools JavaScript Class
//protector class
var dwProtector = new Class({
//implements
Implements: [Options],
//options
options: {
image: 'blank.gif',
elements: 'img',
zIndex: 10
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
this.options.elements = $$(this.options.elements);
//make it happen
this.protect();
},
//a method that does whatever you want
protect: function() {
//for each image that needs be protected...
this.options.elements.each(function(el) {
//get the element's position, width, and height
var size = el.getCoordinates();
//create the protector
var p = new Element('img', {
src: this.options.image,
width: size.width,
height: size.height,
styles: {
'z-index': this.options.zIndex,
'left': size.left + 'px',
'top': size.top + 'px',
'position': 'absolute'
}
}).inject($(document.body),'top');
},this);
}
});
The class is so simple it has only one working method! The protect() method places the "blank" image over the image you need to protect.
The Usage
window.addEvent('domready', function() {
var protector = new dwProtector({
image: '/blank.gif',
elements: $$('.protect')
});
});
Not a whole lot in the way of usage. Simply instantiate the class and pass in the image path and the elements to protect. Download the blank.gif image here.
One note I'd like to share. You could use a DIV element instead of an image, but using an image as the overlaying element allows you to dupe the user into thinking that they actually are saving an image.
This isn't meant to be THEE image protector. Print-screen or a quick view-source will get the user the image. View source though...maybe I can find a solution to make that harder....Anyways, use as you need to.
Very nice one again !
This seems to be a pretty handy tool to guard against the average user. However, simply by going to Firebug and looking at the pages network transactions you can easily find the URL to the image (it takes 5 seconds, 3 to load the page).
The best way to protect images is with a back-end script that will automatically place a watermark (visible or invisible) in the image before it gets served to the users browser.