오른쪽 클릭으로 이미지 다운로드 방지하기

Question

편집 : 많은 의견에 대한 응답으로 이미지가 다운로드되는 것을 완전히 막을 수있는 확실한 방법이 없다는 것을 알고 있습니다. 이 방법은 단순한 마우스 오른쪽 버튼으로 일반 사용자가 다운로드하는 것을 방지합니다. 아마도 가장 좋은 방법은 단순히 이미지를 저작권으로 보호하는 것이고 디지털 이미지에 워터 마킹을 적용하려면 Digimarc와 같은 서비스를 사용하는 것이 좋습니다. 이제 질문 :

나는 실제 이미지 위에 GIF 오버레이를 사용하는 사이트를 발견하여 사용자가 이미지를 마우스 오른쪽 버튼으로 클릭하여 다운로드 할 수 있도록했습니다 (그래도 코드 내에서 실제 이미지를 얻을 수는 있지만).). 그들은이 작업을 수행하는 데 사용하는 코드는 다음과 같습니다

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div> 

내 질문은 original 태그가 실제 태그하지 않고 사용하고 어떤 종류의 자바 스크립트에 의해 번역입니다. 내 사이트에서이를 복제하고 싶습니다. 누군가이 스크립트를 찾도록 도와 줄 수 있습니까?

Answer 1

이것은 무의미합니다. 브라우저가 이미지를 표시하면이를 가져올 수 있습니다. 이를 막으려는 시도는 단지 을 쉽게 회피 할 수있는 사이트 오버 헤드 일뿐입니다.

당신은 이미지 자체에 저작권 고지를하는 것이 가장 좋습니다. 사용자의 선택을 방지하기 위해 아무것도하지 않는 경우에

, 당신이 정말로 original은 당신이 할 수있는 특성을 교환하려는 경우 ...

$(function() { 
var o = $('img').attr('original'); 
$('img').attr('src', o); 
}); 

Demo here

하지만 ... 그리고 original 속성에 묶인 이미지 저장. 또한,

ondrag="return false" 
ondragstart="return false" 
oncontextmenu="return false" 
galleryimg="no" 
onmousedown="return false" 

이미지 인쇄 작은을 선택적으로, img 태그에 이것을 추가 :

Answer 2

또한 원래 태그없이이 작업을 수행 할 수 있습니다

http://rainbow.arch.scriptmania.com/scripts/no_right_click.html

이 링크를 참조하십시오.

이 링크가 도움이 될 것이라고 생각합니다.

Answer 3

당신이 달성하려고하는지에 대한 간단한 해결책은 img 태그에 이러한 모든 속성을 추가하는 것입니다 :이 알 내 구현

@media print 
{ 
    .imgPrint 
    { 
     width: 40%; 
    } 
} 

Answer 4

:

class="imgPrint" 

그리고이 관련 CSS를 포함 이미지의 보호.

이미지 (또는 텍스트) 위에 투명 커버 DOM 요소가 만들어집니다. 자바 스크립트를 사용 중지하면 이미지가 숨겨지고 덮개를 제거하면 이미지가 마우스 위로 숨겨집니다. 이미지를 오른쪽 클릭해도 사용할 수 없습니다.

언제든지 화면을 인쇄하고 다운로드 한 리소스 등을 가져올 수 있습니다. 다운로드의 가장 기본적인 방법 만 필터링합니다.그러나보다 편리하게 보호하려면 이미지 경로를 숨기고 캔버스 객체에 렌더링해야합니다.

개선 할 수는 있지만 이미지를 가져 오는 방법은 항상 있습니다.

주요 브라우저에서 작동하고 작동합니다!

HTML

<div class="covered"> 
    <img src="image.jpg" alt="" /> 
</div> 

JAVASCRIPT + JQUERY

$('.covered').each(function() { 

    $(this).append('<cover></cover>'); 
    $(this).mousedown(function(e){ 
     if(e.button == 2) { 
      e.preventDefault(); 

      return false; 
     } 
     return true; 
    }); 

    $('img', this).css('display', 'block'); 

    $(this).hover(function(){ 
     var el = $('cover', this); 
     if (el.length <= 0) { 
      $(this).html(''); 
     } 
    }); 
}); 

CSS

cover 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.covered 
{ 
    position: relative; 
} 

.covered img 
{ 
    display: none; 
}