mootools_MooTools 1.2 Image Protector：dwProtector

mootools

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.

我需要的只是一个小的MooTools脚本。

View Demo 查看演示 Download 下载

MooTools JavaScript类 (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.

该类非常简单，只有一种工作方法！ 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.

使用方式不是很多。 只需实例化该类，然后传递图像路径和要保护的元素。 在此处下载blank.gif图像。

View Demo 查看演示 Download 下载

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.

我想分享一张便条。 您可以使用DIV元素而不是图像，但是使用图像作为覆盖元素可以使用户欺骗，使他们认为他们实际上是在保存图像。

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.

这并不意味着是THEE图像保护器。 印刷屏幕或快速查看源将为用户提供图像。 虽然查看源代码...也许我可以找到一个解决方案，以使其更困难....无论如何，请根据需要使用。

翻译自: https://davidwalsh.name/mootools-image-protector-dwprotector

mootools