サイト上の画像を安易に保存させない方法・コピーガード対応

よく芸能人の写真等を保存させないためにいわるゆるコピーガード対応をしますが、スマホ対応も含め今回色々調べたのでまとめておきます。

サイトの作りに詳しい人には無力ですが、安易には保存できなくする方法です。

サイト全体で右クリック禁止+ドラックアンドドロップ禁止+スマホ長押し禁止

PCでは右クリック禁止＋ドラックアンドドロップ禁止。スマホでは保存の表示がでなくなる＋画像を長押ししてもコピーできなくする方法です。

JavaScript

document.body.oncontextmenu = function () {return false;}

CSS

body {
  -webkit-touch-callout: none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

img {
  pointer-events: none;
}

よく検索すると見つかる方法ですが、デメリットとしてテキストのコピーも出来なくなってしまいます。

画像のみ右クリック禁止+ドラックアンドドロップ禁止+スマホ長押し禁止

こちらはテキストはコピーでき、画像のみ色々禁止するタイプです。

JavaScript（jQuery）

$('img').on('mousedown',function(){
		return false;
	});
  $('img').on("selectstart", function() {
    return false;
  });
	$('img').on("contextmenu", function() {
    return false;
  });

CSS

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

こちらだと画像だけ出来てスマートかもしれません。

透明な画像を前面に置く

コピーガードしたい画像を下に置いたりCSSで背景として設置して、その上に透明な画像（spacer.gif等）を置く方法です。

ただこちらは製作が大変なのと、後から入れるのには厳しいものがあるのでやるとしたら最初の制作時から対応したい方法です。