画像の保存を禁止する方法

公開日: : 最終更新日:2016/06/19 制作基本

画像の保存を完全に防ぐことはできません。
スクリーンショットを取って画面ごとコピーしちゃったらそれまでだし、ソースコードを見る事ができる人はソースコードを読めば画像のパスなんて分かっちゃいますし、JavaScriptでコピーガードを設定しても、JavaScriptをoffにすれば、効果は無効になってしまいます。
いくら自転車に鍵をかけていても、取る相手に技術があればいくらでも取りようがある。取られるときは取られちゃうんです。
でも鍵をかけてないよりは、かけてる方が取るには手間がかかるので、ある程度の抑止力にはなると思います。 …というわけで、いくつかの方法をメモ。

右クリックを禁止する方法

JavaScriptで右クリックを禁止します。[oncontextmenu="return false;" ] を 追加記入するだけでOK。 すごく簡単な方法です。

<body oncontextmenu="return false;">
<p oncontextmenu="return false;">テキスト</p>
<img src="#" oncontextmenu="return false;" />

また、クリックそのものやドラッグを禁止したり、右クリック禁止したものを右クリックしたときに「右クリック禁止」的なアラートを表示することもできますが…

<body onMouseDown="return false;" onSelectStart="return false" oncontextmenu="return false;">

※[onMouseDown="return false;"]:クリック禁止。[onselectstart="return false;"]:選択禁止。

<img src="#" oncontextmenu="alert('右クリック禁止');return false;">

…でもアラート付きって、サイト見てる人からしてみたら感じ悪かったりするので、アラートOFFのほうがまだよいかも。
↓ 右クリックしてみてください。これ、超感じ悪くないっすか?
sirba

スマホ長押しでの画像保存をガード

iphone長押しでの画像保存をガード

CSSのみでガードできるので、楽チンなのですが、この方法はiphoneのみに有効で、Android2〜4.xには効果ありません(Chromeだと動作します)。
なので、Android標準ブラウザ向けにも対策をしたい場合は別の方法を使用します。

img {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}

透明画像を上に置いて画像保存をガード

jQUeryプラグインの「dwImageProtector Plugin」を使います。
このプラグインは画像ファイルの上に透過gifを重ねて、「右クリック名前をつけて画像を保存」をしたとき、元画像でなく透過gifが保存されるようにします。

1. jQueryライブラリを読み込む

jQueryを使うために、HTMLにライブラリを読み込みます。
jQueryライブラリの読み込みは、jQuery公式サイトからダウンロードしたjQueryにリンクする方法と、CDNサーバーのURLに直接リンクを貼る方法があり、どちらでもOK。読み込み方わからない人は、こちら参照

2. jquery.dwImageProtector.jsをダウンロードする

「jquery.dwImageProtector.js」をダウンロードして、jsフォルダなどに格納します。

3. <head>~</head>内に書き込む

以下のコードを<head>~</head>内に書きこみます。

<script type="text/javascript" src="js/jquery-1.12.1.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>

※[class="protect"]指定したimgにガードを適用する。 ('img.protect')を ('img')に書き換えて、img全般にガードを適用させることも可能だが、imgのリンクが効かなくなる。画像クリックで別のページヘリンク等しているときは使えなくなるので、ガードさせたい画像だけに[class="protect"]指定するほうが無難。

4. 透明画像を用意する

1px 四方の透明画像 (blank.gif) を作成して保存します。初期設定の画像保存先は、HTMLファイルと同じ階層に入れること…となってますが、私はHTMLファイルと画像が混在するのは嫌なので、imagesフォルダに保存しました。
なので、「dwIMageProtector.js」の少し書き換えが必要です。

jQuery.fn.protectImage = function(settings) {
	settings = jQuery.extend({
		image: 'http://○○○○.ne.jp/images/blank.gif',
		zIndex: 10
	}, settings);
	return this.each(function() {
		var position = $(this).position();
		var height = $(this).height();
		var width = $(this).width();
		$('<img />').attr({
			width: width,
			height: height,
			src: settings.image
		}).css({
			//border: '1px solid #f00',
			top: position.top,
			left: position.left,
			position: 'absolute',
			zIndex: settings.zIndex
		}).appendTo('body')
	});
};

※3行目:'blank.gif'を絶対パスでアドレス変更。初期設定では、画像に赤い囲みが入るので、囲みを非表示にしています。

5. class指定する

ガードをかけたい画像に[class="protect"]を書き加える。

<img src="#" class="protect" />

枠がずれてしまうときは、dwIMageProtector.js20行目の appendTo('body') の body を任意のclassやidに変更します。
レスポンシブな設定のせいか、何をしてもずれちゃってダメなときは、最終的に、

		}).appendTo('.guard')
<div class="guard">
<img src="#" class="protect/>
</div>

に変更して、ようやく落ち着きました。



関連記事

フォント

フォントサイズ「rem」

rem 今までフォントサイズには「px」「em」「%」などを使うのが一般的でしたが、「rem」という...

記事を読む

©

著作権表示に関する記述

著作権表示(copyright)とは 著作権表示とは、著作物の著作権者や著作物の発行年などに関する表...

記事を読む

WEB制作基本

iPhoneで数字にリンクが勝手につくのを防ぐ方法

iPhoneで自動でつくリンクを解除する iPhoneの標準ブラウザのSafariでは、HTML ...

記事を読む

WEB制作基本

class名・id名

サイトを作るときに適当につけていいclass名やid名。 どんな名前でもいいけど毎回悩んでしまう。 ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑