HP上で使っている画像は、誰でも簡単に保存（ダウンロード）することが可能です。
右クリック→名前を付けて画像を保存 で保存ができてしまいます。
でも、
「自分の写真やイラストを簡単に保存されてしまうのは嫌だ！」
「写真をパクられないように保存を禁止したい！」
という方もいると思います。
インターネット上に公開している以上、完全に保存されないようにすることは難しいですが、
簡単に保存されないようにする方法はいくつかありますので、
その方法をご紹介します。
右クリックを禁止する方法
まずは画像の上で右クリックができないようにしてしまう方法です。
右クリックができなければ「名前を付けて画像を保存」が表示されませんので、そこから保存することができなくなります。
下記のコードを img タグに入れるだけ！
oncontextmenu=”return false;”
例えば下記のようになります。
HTML
|
1 |
<img src="imagex/abc.jpg" width="610" height="315" oncontextmenu="return false;" /> |
もしアラート（警告）を表示させたい場合は下記のようにします。
|
1 |
oncontextmenu="alert('画像保存しないでね！'); return false;" |
実際に上記コードを入れた画像です。右クリックしてみて下さい。
画像毎にコードを入れていくのが面倒だという場合はHTMLのbodyタグに記載でも可能です。
全体
HTML
|
1 |
<body oncontextmenu="return false;"> |
画像にのみ(jQuery)
js
|
1 2 3 4 5 |
$(function(){ $("img").on("contextmenu",function(){ return false; }); }); |
透明な画像を重ねる方法
次は表示している画像の上に透明な画像を重ねてしまうという方法です。
HTML
|
1 2 3 |
<div class="img-guard"><span class="guard-nopic"></span> <img src="imagex/abc.jpg" width="800" height="400"> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.img-guard{ position:relative; width: 800px; height: 400px; } .guard-nopic{ position:absolute; display:block; width:100%; height:100%; background: url(images/guard.png); } |
※横幅と縦幅は画像の大きさによって変えてください。
実際に上記コードを入れた画像がこちらです。ブラウザによっては右クリックしてみても名前を付けて画像を保存が表示されません。保存ができても透明な画像 guard.png が保存されます。
長押しアクションを禁止(スマホ)
スマホでの画像保存禁止用です。
css
|
1 2 3 4 5 6 7 8 |
img{ -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; -moz-user-select:none; touch-callout:none; user-select:none; } |
今回紹介した方法は簡単に実装ができると思います。
最初にも触れましたが、完全に画像の保存を禁止することはできませんが誰でも簡単に保存はできなくなると思います。