右クリックなどの画像ダウンロードを防止するjQueryプラグイン

Category
： Javascript

Webサイトに掲載してある画像は、右クリックや画像をドラッグして保存する事が簡単に出来ちゃいます。

Web上で画像保存を完全に防ぐ事は不可能ですが、簡単にダウンロードする事を防ぐ事が出来るjQueryプラグインです。

防ぐことが可能な事

右クリック→保存
右クリック→背景に設定での保存
右クリック→背景画像の表示
デスクトップに画像をドラッグ＆ドロップで保存

ダウンロード・使い方

ダウンロード元「dwImageProtector for jQuery」

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dwImageProtector.js"></script>
<script type="text/javascript">
	$(window).bind('load', function() {
		$('img.protect').protectImage();
	});
</script>

XHTML

<img src="image/001.jpg" alt="" width="699" height="590" class="protect" />

img タグ内に class="protect" と指定した要素の保存を防いでくれます。

jquery.dwImageProtector.js

jQuery.fn.protectImage = function(settings) {
	settings = jQuery.extend({
		image: 'blank.gif',
		zIndex: 10
	}, settings);
	return this.each(function() {
		var position = $(this).position();
		var height = $(this).height();
		var width = $(this).width();
		$('').attr({
			width: width,
			height: height,
			src: settings.image
		}).css({
			top: position.top,
			left: position.left,
			position: 'absolute',
			zIndex: settings.zIndex
		}).appendTo('body')
	});
};

指定した画像の上に blank.gif と言う画像を載せて防いでるって感じです。 blank.gif は透明の1px×1pxなんですが、本サイトからダウンロードしにくかったので zip にしておきました(blank.gif) 出来るようにしておきまね。

自分が検証してみた所 jQuery1.3 以降だとIEで上手く挙動していませんでした。 jQuery1.2 だと問題なく動いていたので気を付けて下さいね。