【PC・スマホ】サイト上の画像の保存を禁止したい
2016/12/16
本日は某所まで派遣登録へ行ってまいりました。
さて、表題の件ですが
お客様よりサイトの画像保存をさせたくないと言われまして、
作業しました。
キャプチャされたり
WebDeveloperツールで見たりしたら回避されてしまうのですが。。。
やるだけのことはやりました。
body {
-webkit-touch-callout:none; // リンク長押しのポップアップ(※1)を無効化
-webkit-user-select:none; // テキスト長押しの選択ボックス(※2)を無効化
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
var timer;
$("img").on("touchstart",function(){
timer = setTimeout(function(){
alert("画像は保存できません")
},500)
return false;
})
$("img").on("touchend",function(){
clearTimeout(timer);
return false;
})
})
</script>
<body oncontextmenu="alert('画像の保存は禁止です。');return false">
スマホ用の記述とbodyタグのalertの記述がPCで右クリックを禁止する記述です。
【参考サイト】
こんな感じです。
iPhoneの実機が無いのでチェックできないのが痛いです。
PCとAndroidの標準ブラウザ、Chrome、FireFoxで動作確認済みです。
iPhoneだと画像保存できてしまっていたのですが以下の方法で解決しました。
【最終的に参考にさせていただいた記事】
iOS8でwebkit-touch-calloutが効かない。その対処法
img{pointer-events: none;}