こんにちは、タクゾウです。
サイトのレギュレーションによっては、右クリックとスマホの長押しによる画像保存を禁止にすることがあるので、やり方を紹介したいと思います。
DEMO・参考サイト
保存禁止処理、動的に生成した画像に対しての保存禁止処理、保存禁止処理無しの3パターンがあります。
動的に生成した画像に対しても、保存禁止処理をかけることができます。
右クリックとスマホの長押しによる画像保存を禁止する方法
わかりやすいようにコメント多めで書いています。
html
<!-- 画像保存禁止にしたい要素にクラス名を付与する -->
<img class="imgGuard" src="./assets/images/img_sample01.jpg">
JavaScript
/*
* 画像保存禁止
* @return none
*/
function imgGuard(name){
//PCの右クリックによる画像保存禁止処理
$(name).on('contextmenu',function(e){
return false;
});
$(name).on('mousedown mouseup',function(e){
return false;
});
//スマホ長押しによる画像保存禁止処理
$(name).css({
'pointer-events':'none',//iphone対応するための記述
'-webkit-touch-callout':'none',
'-webkit-user-select':'none',
'-moz-touch-callout':'none',
'-moz-user-select':'none',
'touch-callout':'none',
'user-select':'none'
});
}
//DOMがよみこまれた段階で実装
$(function(){
imgGuard('.imgGuard');
});
使用方法
imgGuard()関数を呼び、引数に画像保存を適応させるためのクラス名を指定する。
DEMOでは、適応させる要素に、「imgGuard」を指定しています。
画像全てに適応させる場合は、引数にimgタグを指定する。
imgタグを引数にした場合は、全てのimgタグに画像保存禁止処理がかかります。
この場合は、htmlでクラス名を付与する必要はありません。
css
//DOMがよみこまれた段階で実装
$(function(){
imgGuard('img');
});
まとめ
他にも、透明画像を上に置いて画像保存をガードする方法がありますが、positionなどを使っていると表示崩れの元になるので、jsで実装しましょう。
スクリーンショットがあるので完全には防げないですが、ある程度は保存を禁止できます。
Web制作を勉強している人の参考になれば幸いです。
コメントを残す