防止通过右键单击下载图像答案

【问题标题】：Protecting an Image from downloading by Right-Click防止通过右键单击下载图像
【发布时间】：2015-11-21 01:07:00
【问题描述】：

编辑：我确实知道许多 cmets 没有可靠的方法来完全保护图像不被下载。这种方法是为了防止普通用户通过简单的右键单击下载。最好的方法可能是简单地对您的图像进行版权保护，如果您非常担心，可以使用 Digimarc 之类的服务对您的图像进行数字水印。现在问题来了：

我遇到了一个网站，它在其实际图像上使用 GIF 叠加层，以防止用户右键单击和下载图像（尽管您仍然可以从代码中获取实际图像）。他们用来执行此操作的代码是：

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

我的问题是original 标签不是真正的标签，它被某种Javascript 使用和翻译。我想在我的网站上复制它。谁能帮我找到这个脚本？

【问题讨论】：

您知道用户显然可以非常轻松地解决这个问题，对吧？
我们可以帮助您解决与编程相关的问题，但要求我们为您查找脚本并不完全适合这里。请阅读常见问题解答。
鉴于您已经设法阅读了您正在查看的页面的 html 源代码，您为什么不同时查看相关的 JS 呢？ original 属性是一个非标准的属性。虽然技术上无效的 html 大多数（全部？）浏览器会忽略它，但允许从 JS 访问它。
@Dan - 是的，我意识到这一点。我编辑了我的问题以对此做出“免责声明”。
试试这个插件github.com/thatisuday/copynote

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

【解决方案1】：

这是没有意义的。如果浏览器显示图像，则可以拍摄。任何阻止这种情况的尝试都只是可以非常轻松规避的网站开销。

无论如何，如果您真的想交换original 属性，您可以...

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

Demo here

但是...这并不能阻止用户选择和保存与 original 属性绑定的图像。

【讨论】：

您可以阻止他人复制您的图片。如果您在站点的上下文中使用给定的客户端密钥，则使用一点 php，您可以通过脚本页面请求图像，并且如果密钥的签名无效，则返回 404。还使用 oncontextmenu false 技术可以轻松阻止人们从您的网站下载图片。
@kheal，对不起，你不正确。我总是可以截取屏幕截图并获取任何图像。同样，任何阻止某人抓取图像的尝试都是毫无意义的。最好的保护措施是直接在图片上添加版权声明。
我不会说这毫无意义，但它充其量只是一个很小的威慑力，它只会阻止对浏览器或 HTML 一无所知的新手。任何有线索（或能够进行 Google 搜索）的人都可以轻松绕过叠加的图像以获取真实图像，或者在最坏的情况下抓取它的屏幕截图。
你说得对，我没想到这个级别。打印屏幕键的 javascript keylistener 怎么样（这只是一个有趣的想法），它会让你的照片变黑。对于谷歌部分，如果图片不在页面的上下文中，脚本将返回 null 所以它仍然从这个角度来看。无论如何，这将是一个非常酷的话题。
@khael -- 如果图像在屏幕上呈现（在 img 标签内），则它已下载到用户机器（缓存）。干净利落。无需截图。原件的 1 - 1 份副本位于用户机器上，可以随心所欲地做任何事情。再多的编程技巧，无论多么“聪明”，都无法改变这一点。

【解决方案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%;
    }
}

【讨论】：

【解决方案3】：

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

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

查看此链接。

我想这就是你想要的，这个链接可能会对你有所帮助。

【讨论】：

这个链接非常有帮助 - 在开发更复杂的解决方案时，这是一种非常快速的方法来获得简单的右键单击保护。

【解决方案4】：

这是我对图像进行光保护的实现。

它将在图像（或文本）上创建一个透明的封面 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;
}

【讨论】：