【jQuery不要】javascriptで画像保存を禁止する方法【右クリック・スマホで画面長押し禁止】
普段使う場面はほとんど無いかと思いますが、仕事で「webページの画像を保存できないようにしてくれないか？」と言われ対応したことがあり今回はその方法を紹介したいと思います！
ただこの方法は完全に画像を保存できなくするわけではありません以下の方法で画像保存できなくします。
- 右クリック禁止
- ドラッグ&ドロップでの画像保存禁止
- スマホでの画面長押しでの画像保存禁止
スクリーンショットまたはソースコードを見て画像のパスに直接アクセスして保存するなどは流石に防げません（笑）
目次
javascriptで画像保存を禁止する方法
さっそく方法をご紹介します！
以下のソースコードをコピペして貼り付けて下さい！
これですべてのimgタグに対して画像の保存禁止が付与されます！
以上！ですが簡単な解説を後述します。
function imageGuard(selector){
var guard_selector = document.querySelectorAll(selector);
for(var n = 0; n < guard_selector.length; n++){
guard_selector[n].addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
}
var guard_style = {
'pointer-events':'none',
'-webkit-touch-callout':'none',
'-moz-touch-callout':'none',
'touch-callout':'none',
'-webkit-user-select':'none',
'-moz-user-select':'none',
'user-select':'none'
}
Object.keys(guard_style).forEach(function(v, i, a){
for(var n = 0; n < guard_selector.length; n++){
guard_selector[n].style[v] = guard_style[v];
}
});
}
document.addEventListener("DOMContentLoaded", function() {
imageGuard('img');
});簡単な解説&使い方
簡単な解説をします。
主にやっている処理は2つです！
- 右クリック禁止処理
- cssで様々なイベントを無効化
右クリック禁止
指定したセレクターに対して右クリック禁止イベントを与えます。
for(var n = 0; n < guard_selector.length; n++){
guard_selector[n].addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
}cssで様々なイベントを無効化
変数guard_styleに付与したいcssを記述。
そのcssを指定したセレクターに対して付与。
var guard_style = {
'pointer-events':'none',
'-webkit-touch-callout':'none',
'-moz-touch-callout':'none',
'touch-callout':'none',
'-webkit-user-select':'none',
'-moz-user-select':'none',
'user-select':'none'
}
Object.keys(guard_style).forEach(function(v, i, a){
for(var n = 0; n < guard_selector.length; n++){
guard_selector[n].style[v] = guard_style[v];
}
});実行
imageGuard関数を実行して終わりです。
imageGuard('img');引数にはセレクターを指定します。
セレクターの指定方法はcssセレクターで指定します。
例：idgalleryの中のimgのみ画像保存禁止したい場合。
imageGuard('#gallery img');最後に
最初にもお伝えしたようにこの方法は完璧ではありません。
あくまでお手軽に画像を保存できなくするくらいに考えて下さい。