Webサイトが出回り出したときから、ずっと版権、著作権的な問題は課題となっています。
そこでいつも、こんなこと出来ないか、と挙がってくるのが、保存防止をするような仕掛け。
しかしながら、どんなサイトでも画像が表示された時点で、閲覧者のデバイスへ画像が表示されている時点で保存を抑制することは基本不可能です。
簡単な気休め程度にはなりますが、あらためてコンテクストメニュー（右クリック）の制御を紹介します。
jQueryで以下の記述をすると簡単に、条件をつけて「右クリックで何もしない」を実行できます。
$(document).ready(function(){
$('img').on('contextmenu',function(e){
var img_src = $(this).attr('src');
if ( img_src.match(/001/)) {
return false;
}else{
//skip
}
});
});
普通の画像
<img src="http://www.kipure.com/img/demo/femail/002.jpg" width=200>
画像のパスに「001」という文字がある場合、PCの右クリックと一部のスマホの長押し保存を無効にする
<img src="http://www.kipure.com/img/demo/femail/001.jpg" width=200>
画像のパスの中の文字列を条件にすることにより、画像の名前やディレクトリ名に特定の文字列を入れて、その画像群は右クリック出来ないようにすることが簡単にできます。
PCの右クリックの制御とスマホの長押しの制御を以下のCSSと合わせて実行しています。
<style>
img.no_select{
-webkit-touch-callout:none;
-moz-touch-callout:none;
touch-callout:none;
user-select:none;
}
</style>
$(function(){
$('[src*=001]').addClass("no_select");
})
一部のandroidのブラウザは上記のCSSが効かないので、長押しをjQueryで制御する場合はこちら。
$(function(){
var timer;
$("img").on("touchstart",function(){
var img_src = $(this).attr('src');
if ( img_src.match(/001/)) {
timer = setTimeout(function(){
alert("この画像は保存できません")
},400)
return false;
}else{
//skip
}
})
$("img").on("touchend",function(){
clearTimeout(timer);
return false;
})
})
