Log in
  • Search
  • Subscribe to the feed

图片保护脚本：dwProtector

Filed under: 网络开发 by icyleaf on August 11, 2008.

网站的图片保护是一个热门话题，为什么呢？你想想如果您辛辛苦苦花了两个小时设计出来个设计，你会希望它被别人无情的PS，修改做别人的东西吗？当然是被允许的，这就是dwProtector产生的原因。

dwProtector是基于mootools开发的插件。那么，dwProtector的功能强度有多大呢，看下面列表：

  • 守护右键“（图片）另存为”（"Save Image As"）
  • 守护右键“背景图片另存为”（"Save Background As"）
  • 守护拖拽图片到桌面
  • 甚至是守护右键

在线功能演示：http://davidwalsh.name/dw-content/image-protector.php
里面的图片很凶猛哦...

核心代码：

?Download protector.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//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);
 
		//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);
 
	}
});

通过上面的代码可以发现，用户虽然可以上面的方法保存图片，不过下载下来的图片只是我们函数里面替换掉的blank.gif。

使用方法：
1. 下载mootools和dwProtector以及空的替换图片blank.gif，下载后放置在网站合适的位置。
2. 把下面代码插入到全局的头部文件中(）：

?Download html.txt
1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript" src="moo1.2.js"></script>
 
<!-- 或者直接插入上面的核心代码 -->
<script type="text/javascript" src="dwProtect.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {  
var protector = new dwProtector({  
image: '/blank.gif',  
elements: $$('.protect')    //设置图片保护标记，这里为class="protect"
});  
});
</script>

3.在你的图片加入 class="protect"（可以通过步骤2修改保护图片标记），如：

?Download img.txt
1

<img src="sample.jpg" class="protect" alt="sample"/>

作者在结尾声明，对于查看网页源文件或其他方法还是可以很轻松的获得图片的地址，而且我还尝试用选中图片，复制，粘贴在富文本编辑器下面也是可以显示的...不过作者目前还在想办法解决这方面的问题，让我们一起为作者加油吧！

Popularity: 7% [?]

2
  • 2 Comments
  1. Comment by leafduo — August 11, 2008 @ 20:24

    我觉得没什么意义
    我都看见图片了
    我截图行不行？

  2. Comment by 烧坏的内存条 — August 12, 2008 @ 00:05

    版权保护 任重道远啊 - -

  • Leave a comment

(required)

(required)