2012-01-02 131 views
3

编辑:为了回应很多评论,我确实知道没有确定的防火方式来完全保护图像不被下载。这种方法是通过简单的右键单击来防止临时用户下载。最好的办法可能就是简单地对你的图片进行版权保护,如果你非常担心会使用像Digimarc这样的服务来对你的图片进行数字水印。现在到这个问题:通过右键点击保护图像

我遇到了一个网站,使用GIF覆盖他们的实际图像,所以它保护图像从用户右击和下载图像(尽管你仍然可以从代码中抓取实际图像)。他们用它来做到这一点的代码是:

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

我的问题是original标签是不是一个真正的标签和使用,并通过某种Javascript的翻译。我想在我的网站上复制此内容。有人能帮我找到这个脚本吗?

+3

你知道一个用户显然可以很容易地解决这个问题,对吧? – Dan 2012-01-02 05:21:11

+1

我们可以帮助您编程相关的问题,但要求我们为您找到脚本并不完全适合您。请阅读常见问题。 – Kenaniah 2012-01-02 05:22:15

+0

鉴于你已经设法读取你正在查看的页面的html源代码,为什么你不看看关联的JS? 'original' _attribute_是一个非标准的_attribute_。虽然技术上无效html大多数(所有?)浏览器都会忽略它,但它允许从JS访问它。 – nnnnnn 2012-01-02 05:36:43

回答

6

这是毫无意义的。如果浏览器显示图像,可以采取。任何防止这种情况的尝试只是网站开销,可以很容易地绕过

你最好的保护就是在图像上贴上版权声明。

在任何情况下,如果你真的想交换original属性,你可以...

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

Demo here

但......这并不做任何事情来阻止用户选择和保存与图案绑定在一起的图像属性original

+0

您可以阻止某人复制您的图片。如果你在一个给定的客户端关键字的情况下,你可以通过一个脚本页面请求图像,如果该关键字的签名是无效的,返回404.也可以使用oncontextmenu false技术可以轻松阻止人们从您的网站下载图片。 – khael 2012-01-02 06:16:00

+2

@kheal,对不起,你是不正确的。我总是可以截图并获取任何图像。再次,任何阻止某人抓取图像的尝试都是毫无意义的。最好的保护是直接在图像上添加版权声明。 – Scott 2012-01-02 06:19:29

+0

我不会说它毫无意义,但它是一个非常小的威慑力,它只能防止对浏览器或HTML一无所知的新手。任何有线索(或能够执行Google搜索)的人都可以轻松绕过重叠的图像以获得真实图像或最糟糕的情况,只需抓住它的屏幕截图即可。 – jfriend00 2012-01-02 06:19:43

2

你可以做到这一点没有原来的标签也:

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

看到这个链接。

我认为这是你想要的,这个链接可能对你有帮助。

+0

这个链接非常有帮助 - 一个非常快速的方法来获得一个简单的右键单击保护,而一个更复杂的解决方案正在开发中。 – redhotspike 2013-07-06 19:25:17

2

你要完成什么样一个简单的办法是将所有这些属性添加到img标签:

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

此外,有选择地使图像打印时,将其添加到img标签:

class="imgPrint" 

,包括此相关的CSS:

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

这是我实施人保护图像。

它将在图像(或文本)上创建一个透明的覆盖DOM元素。如果您禁用了JavaScript,图像将被隐藏,如果您移除封面,图像将隐藏在鼠标上方。也右键点击图像被禁用。

你可以随时打印屏幕,从下载的资源等获取,这只会过滤最基本的下载方式。但为了更方便的保护,您必须隐藏图像路径并呈现给画布对象。

你可以改善这一点,但总是有一种方法来获取图像。

在主流浏览器上测试并正常运行!

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; 
}