右クリックでの画像保存を禁止する（PC対策）

右クリックでの画像保存を禁止するには、imgタグに対してCSSのpointer-eventsプロパティをnoneに指定します。
もちろんclassを指定しても構いません。

ソースコードは、以下です。

CSS
コピー
img{
    /* PCの右クリック禁止 */
    pointer-events: none;
}

実装プレビュー

pointer-eventsプロパティをnoneにすると指定された要素のクリックイベントが無効になります。
よってpointer-eventsプロパティを指定した要素の下にある要素にクリックイベントが発生します。
そんなわけで右クリックでの画像保存を禁止することができるのです。

長押しでの画像保存を禁止する（スマホ対策）

スマホでは画像を長押しすることで画像を保存できるのでそれの対策です。
方法は、imgタグにtouch-calloutプロパティとuser-selectプロパティをnoneにします。

CSS
コピー
img{
    /* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

実装プレビュー

今回使用しているCSSプロパティはベンダープレフィックスが必須です。
ベンダープレフィックスがよくわからない方はこちらで説明しています。

touch-calloutプロパティをnoneにすると長押ししたときの挙動が無効になります。
touch-calloutプロパティはAndroidはサポートして無いみたいなんです。
ブラウザ対応状況

user-selectプロパティをnoneにすると対象要素の文章を範囲選択できなくなります。
user-selectプロパティは全てのブラウザに対応しているようです。
ブラウザ対応状況

ドラッグ＆ドロップでの画像保存を禁止する（PC対策）

ドラッグ＆ドロップでの画像保存を禁止するにはHTMLのbodyタグかimgタグにonselectstartとonmousedownを指定します。
全体をドラッグ＆ドロップさせないようにするにはbodyタグに指定します。
個別に指定したい場合はimgタグに指定します。

HTML
コピー
<img src=“./images/sample.jpg” onselectstart="return false;" onmousedown="return false;">

実装プレビュー

画像を印刷させない（おまけ）

Webページを印刷することで画像を紙で保存されるのを禁止したい場合です。
CSSでメディアクエリを使ってプリントしたときにbodyタグを非表示にします。

CSS
コピー
@media print {
    body { display: none }
}

スクリーンショット対策の方法を整理

今回はどんな方法でスクリーンショット対策をするかというとスクリーンショットするときに押されるキーボードが押されたときにimgタグを非表示にします。というのをjQueryで行います。
キーボードが押されたときなのでPCのみ対応になります。
スマホのスクショを禁止するのは難しいです。

じゃあ、キーボードのどのキーを押したときにimgタグを非表示にしたらいいかというと「shift」「PrintScreen」「Win」の3つをそれぞれ押したときに非表示にします。
それぞれキーコードで指定するので「16」「44」「91」「92」になります。

以下にMac OSとWindowsのスクリーンショットのショートカットをまとめました。

今回指定するキーコードは以下です。

スクリーンショットの完全対策は難しい

スクリーンショットは完全に禁止するのが難しいです。
というか正直なところ抜け道だらけなのです。

どんなのがあるかというと、

• ・別アプリを選択しているときはbodyタグ内を非表示にできない
• ・デベロッパーツールでスクショする
• ・Chromeで拡張機能を使ってスクショする
• ・スクリーンショットアプリを使う

こんな感じでほぼ禁止できてないですね。

キーボードを押さないでスクリーンショットをする方法が割とたくさんあるんです。

スクリーンショットでの画像保存を禁止する（PCのみ）

「shift」「PrintScreen」「Win」の3つをそれぞれ押したときにimgタグを非表示にするjQueryのコードを紹介します。
コピペで使えるのでぜひぜひ!

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();
});

2行目
keydownイベントでキーボードを押したときに発動します。

3行目
キーコードを変数に格納します。

5〜8行目
キーコードが16、44、91、92の時にimgタグを非表示にします。

12行目
keyupイベントでキーボードを離したときに発動します。

13行目
キーボードを離したときにimgタグを表示します。