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

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

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

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

demo page

…ここからが続き

防ぐことが可能な事

  1. 右クリック→保存
  2. 右クリック→背景に設定での保存
  3. 右クリック→背景画像の表示
  4. デスクトップに画像をドラッグ&ドロップで保存

ダウンロード・使い方

ダウンロード元「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 だと問題なく動いていたので気を付けて下さいね。

demo page

Track Back

チバのブログ

jQueryだけで右クリックを禁止する

jQueryだけで右クリックを禁止する方法。保存されたくない画像に対して少しは効果があるかも。

by チバのブログ  

Comments

shokun0803

shokun0803

Fxでページ情報ウィンドウのメディアタブから簡単に落とせますよね・・・それも防ぎたいorz
htaccessで直アクセスもキャッシュ保存も禁止にしているのに上記方法だと簡単に落とせます。
Fx恐るべし。

2010年07月30日 13:37

MIYA

MIYA

このプラグインけっこう使えそうですよ!

画像保存を嫌がるクライアントとかに使えそうですしね。

2009年06月18日 05:28

チバ

チバ

なんか、firefoxで普通に保存できちゃいましたよ、って思ったらbrank.gifだったのね、っていうのでびっくりしました

2009年06月18日 00:07

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article