※当サイトにはプロモーションが含まれています。
クライアント せっかく作成した画像をダウンロードされたくないから対策をしてくれ！
にゃテック できることだけ頑張るにゃ。
作成した図解や、キャラクター画像などをダウンロードやコピーされたくないと思っている方もいるのではないでしょうか？
特に、複雑な制度を説明した図解なんかを流用されてしまったら悲しいですよね･･･。
そこで、今回は、比較的簡単にできる画像のコピー対策についてです。
ただ基本的には、どんな方法を使っても防ぐことは難しいので、その点はご留意ください。
画像のダウンロード対策
画像のダウンロード対策についていくつかの方法を説明します。
方法１：CSSでのドラッグ防止
以下のCSSで、画像のドラッグ操作を禁止することができます。
img {
pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
}
※実際にドラッグ＆ドロップしてみてください
方法２：透明なPNG画像やGIF画像を重ねる
透明なPNG画像やGIF画像を作成して重ねます。
画像サイズは、基本的に1px×1pxで作成します。
ただ、レスポンシブデザインのサイトの場合、画像の位置が変わるため、、透明な画像がずれてしまう可能性があります。
以下の様に記述することで、画像をドラッグ＆ドロップしてもダミーの透明画像がダウンロードされます。
<div style="position: relative; display: inline-block;">
<img src="（画像のURL）" alt="Protected Image">
<img src="（透明画像のURL）" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;">
</div>
※実際にドラッグ＆ドロップしてみてください
方法３：JavaScriptで右クリックの禁止
JavaScriptで右クリックを禁止して、「名前を付けて画像を保存」の機能を禁止します。
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});これにより、ページ全体で右クリックメニューが表示されなくなります。
※このページでは右クリックが禁止されているのでお試しください。
スクリーンキャプチャ時に警告をする方法
残念ながら、スクリーンキャプチャを防ぐのは難しいです。
その為、スクリーンキャプチャをしようとした時に警告を表示するJavaScriptです。
document.addEventListener('keydown', function(e) {
if (e.key === "PrintScreen") {
alert("スクリーンショットは禁止されています。");
// コピークリップボードをクリア
navigator.clipboard.writeText('');
}
});ただ、紹介しておいてなんですが、上記コードではkeydownイベントで「PrintScreen」を検知しようとしていますが、多くのブラウザやシステムでは、特定のキー（例えば「PrintScreen」）のイベントが捕捉されないことがあります。
その為、動かない確率も高いのでその点はご了承ください。
画像を保護する確実な対策としては、画像にウォーターマーク（透かし）を付けるのが一番かと思います。
