드래그 선택 복사 금지에 관한 글을 작성했었는데 이번에는 블로그에 첨부된 이미지 다운로드를 방지하는 방법을 공유합니다. 개별 이미지 다운로드를 방지하는 방법과 한번에 모든 이미지에 적용하는 방법이 있습니다.
개별 이미지 다운로드 방지
개별 이미지 다운로드를 방지하려면 이미지를 업로드할 때마다 수동으로 수정해야합니다. blogger 게시물 편집기 HTML모드에서 업로드된 이미지의 주소 형식은 다음과 같습니다.
<div class="separator" style="clear: both;"><a href="https://이미지경로/s1280/image.webp" style="display: block; padding: 1em 0; text-align: center;"><img alt="" border="0" width="1280" data-original-height="720" data-original-width="1280" src="https://이미지경로/s1280/image.webp"/></a></div>
표시한 부분을 삭제하고 oncontextmenu="return false;"코드를 추가합니다. 이미지 주소 형식을 아래와 같이 해주세요.
<div class="separator" style="clear: both;"><img alt="" border="0" oncontextmenu="return false;" width="1280" data-original-height="720" data-original-width="1280" src="https://이미지경로/s1280/image.webp"/></div>
편집 후 텍스트를 저장하고 이미지를 다운로드해 보세요. 이미지를 우클릭해도 포인터 이벤트 창이 뜨지 않아 다운로드가 되지 않습니다.
모든 이미지 다운로드 방지
이미지를 제공하는 사이트가 아니라면 업로드한 모든 이미지를 다운로드할 수 없도록 설정하는 것이 편리합니다. 다음 자바스크립트 코드를 복사하여</body> 앞에 붙여넣기 하세요.
<script type="text/javascript">/*<![CDATA[*/
document.addEventListener("contextmenu",function(e){"IMG"===e.target.nodeName&&e.preventDefault()},!1);/*]]>*/</script>저장하고 결과를 확인합니다.
위의 두 가지 방법을 이용하여 PC 환경에서 이미지 다운로드를 방지할 수 있습니다. 그러나 iOS 모바일에서는 길게 터치하면 콜아웃이 표시되고 여전히 이미지 다운로드가 가능합니다. iOS 모바일에서 사진 저장을 방지하려면 위의 방법을 적용한 후 아래 코드도 적용하세요.
모바일에서 이미지 다운로드 방지
Blogger에서는 테마 - 맞춤 설정 - 고급 - CSS추가에 붙여넣습니다.
img {-webkit-touch-callout:none;}이미지를 터치할 때 표시되는 콜아웃을 비활성화 했습니다. body {-webkit-touch-callout:none;}를 이미 추가했다면 중복 적용할 필요없습니다.
이 방법으로 이미지 다운로드를 100% 막을 수 없습니다. 개발자 도구에서 소스를 보고 이미지 주소를 확인할 수 있기 때문입니다. 그러나 제한이 없으면 이미지 도용이 더 쉽기 때문에 최소한의 장치를 해두는 것이 좋습니다.