普段使う場面はほとんど無いかと思いますが、仕事で「webページの画像を保存できないようにしてくれないか?」と言われ対応したことがあり今回はその方法を紹介したいと思います!
ただこの方法は完全に画像を保存できなくするわけではありません以下の方法で画像保存できなくします。
スクリーンショットまたはソースコードを見て画像のパスに直接アクセスして保存するなどは流石に防げません(笑)
目次
さっそく方法をご紹介します!
以下のソースコードをコピペして貼り付けて下さい!
これですべての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つです!
指定したセレクターに対して右クリック禁止イベントを与えます。
for(var n = 0; n < guard_selector.length; n++){
guard_selector[n].addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
}
変数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');
最初にもお伝えしたようにこの方法は完璧ではありません。
あくまでお手軽に画像を保存できなくするくらいに考えて下さい。