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

公開日： 2016/03/24 : 最終更新日：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>

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

Message コメントをキャンセル

PREV: 【WordPressテンプレートタグ】comment_author_email_link()：コメント投稿者のメールアドレスを、mailto:リンクとして表示
NEXT: 処方用語の略字表

かじこの備忘録