通过右键单击保护图像不被下载

时间:2012-01-02 05:19:17

标签: javascript jquery image copy-protection data-protection

编辑 为了回应许多评论,我知道没有确定的火灾方法可以完全保护图像免遭下载。此方法是通过简单的右键单击防止临时用户下载。最好的方法可能就是简单地对图像进行版权保护,如果您非常担心,可以使用像Digimarc这样的服务对图像进行数字水印。现在回答问题:

我遇到了一个在实际图像上使用GIF覆盖的网站,因此它可以保护图像免受用户右键单击和下载图像的影响(尽管您仍然可以从代码中获取实际图像)。他们用来做这个的代码是:

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

我的问题是original标记不是真正的标记,并且由某种Javascript使用和翻译。我想在我的网站上复制这个。有人可以帮我找到这个剧本吗?

4 个答案:

答案 0 :(得分:6)

这毫无意义。如果浏览器显示图像,则可以拍摄。任何阻止这种情况的企图只是站点开销,可以非常轻松规避。

您最好的保护措施是对图像本身发布版权声明。

无论如何,如果你真的想要交换original属性,你可以......

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

Demo here

但是...没有做任何事情来阻止用户选择和保存图像绑定eh original属性。

答案 1 :(得分:3)

您尝试完成的更简单的解决方案是将所有这些属性添加到img标记中:

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

此外,要选择使图像打印更小,请将其添加到img标记:

class="imgPrint"

并包含此相关CSS:

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

答案 2 :(得分:2)

您也可以在没有原始标签的情况下执行此操作:

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

请看这个链接。

我认为这就是你想要的,这个链接可以帮助你。

答案 3 :(得分: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;
}