数年前に「ホームページの画像コピー禁止」記事で、ホームページに掲載した画像をコピー禁止とする方法をご紹介しました。
確かに、画像の上で右クリックなどして画像を保存することを禁止することはできます。
それでも、スクショ（スクリーンショット、プリントスクリーン）されれば、画面の解像度に制限されるものの、画像をコピーすることは出来てしまいますね。
ホームページの画像をスクリーンショット（スクショ）から保護するには、次の方法が考えられます：
- ウォーターマーク表示（画像・文字）
- スクショを撮るキー操作をウォッチ
(1) ウォーターマーク表示
画像のイメージを損なわない程度にウォーターマーク（透かし文字など）を重ねて画像を作成します。（下図）
原始的な方法ですが、著作権管理されている画像や有償で提供する画像などの多くにウォーターマークが重ねられています。
こうすれば、スクショを撮られたりしてもウォーターマークも一緒に保存されます。
(2) キー操作をウォッチ
通常、スクショを撮るときのキー操作は、Windows PCでは
- [PrintScreen]
- [Alt]＋[PrintScreen]
- [Win]＋[PrintScreen]
- [Win]＋[Shift]＋[S]
などが用いられます。
これに対し、一例として [Shift]、[PrintScreen]、[Win]キーを押した時に img タグを非表示にする jQueryのコードを以下に示します。
-----(ここから)-----
// キーを押したとき
$(window).on('keydown', function(e){
var keyCode = e.keyCode;
if(keyCode == 16 || keyCode == 44 || keyCode == 91 || keyCode == 92){
$('img').hide();
return false;
}
});
// キーを離したとき
$(window).on('keyup', function(){
$('img').show();
});
-----(ここまで)-----
上記コード中、keyCode が 16 は [Shift]キー、44 は [PrintScreen]キー、91 は [Win](左)キー、92 は [Win](右)キーを押した時のキーコードを表しています。
つまり、これらのキーを押したことを検知したら画像を非表示とし、キーを離すと表示されるというものです。
お気づきかもしれませんが、この方法でスクショ防止をしてもキー操作しないで行なわれれば防げません。
例えば、PC画面をデジカメやスマホのカメラで撮影されれば（画質は悪いですが）撮れてしまいます。
スクショ防止を完全に施すのは難しいです。
絶対にスクショされたくなければ、基本的には Webページに表示しない、または会員ページでのみ表示するなどの対策が必要です。