Question

我知道保护图像下载的最佳方法不是首先将其放在互联网上。

我认为没有100％的图像下载保护，如果用户可以在互联网上看到图像，他可以通过一些经验找到下载图像。

我知道覆盖图片的透明.gif或.png或使用background_image CSS属性来保护它并阻止右键单击下载但是

其他方法会使图像下载变得复杂，从而阻止大多数用户下载图像？

这是一个简单的代码：

<img src="http://placekitten.com/600/450">

Answer 1

另一种删除＆＃34;保存图片的方法＆＃34;上下文菜单是用的一些CSS。这也使得上下文菜单的其余部分保持不变。

img {
    pointer-events: none;
}

它使所有img元素对任何鼠标事件都不起作用，例如拖动，悬停，点击等。

有关详细信息，请参阅spec。

Answer 2

实际上没有办法阻止用户执行特定任务。但你总能采取措施！图像共享网站拥有庞大的开发人员团队日夜工作，可以创建一种防止用户保存图像文件的算法。

第一种方式

试试这个：

$('img').mousedown(function (e) {
  if(e.button == 2) { // right click
    return false; // do nothing!
  }
}

因此，用户将无法单击菜单中的“将图像另存为...”选项，反过来他也无法保存图像。

第二种方式

其他方式是使用background-image。这样，用户将无法右键单击并将图像另存为......但他仍然可以在Inspector中查看资源。

第三种方式

即使我是这个人的新手，几天前当我试图右击时，我正在冲浪Flickr，它不让我做一件事。这反过来是我提供给你的第一种方法。然后我试着去看看检查员，在那里我一无所获。为什么？由于他们使用background-image，同时他们使用data:imagesource作为其位置。

这对我来说也很棒。您可以通过这种方式阻止用户保存图像文件。

它被称为数据URI方案：http://en.wikipedia.org/wiki/Data_URI_scheme

注意

请记住兄弟，当您让用户浏览您的网站时，您在服务器端授予他READ权限，这样他就可以毫无问题地阅读所有文件。图像文件的问题也是如此。他可以读取图像文件，然后他可以轻松保存它们。他在浏览您的网站时首先下载图像。所以他没有问题将它们保存在磁盘上。

Answer 3

无法保护图像下载。这是因为图像必须由浏览器下载才能被用户看到。有一些技巧（比如你指定的透明背景）限制某些操作，如图像右键单击并保存到浏览器缓存文件夹，但没有办法真正保护图像。

Answer 4

如果它只是图像，则JavaScript不是必需的。尝试在你的html文件中使用它：

<img src="sample-img-15.jpg" alt="#" height="24" width="100" onContextMenu="return false;" />

Answer 5

没有完整的方法可以防止您的图片下载/被盗。

但是，某些解决方案如：水印您的图片（来自客户端或服务器端），实施背景图片，禁用/阻止右键点击，切片图片分成小的件，然后作为完整的图片呈现给浏览器，您还可以使用 flash 来显示图片。

就个人而言，推荐的方法是：水印和闪光。但这是一项艰巨而且几乎不可能完成的任务。只要用户能够“看到”该图像，就意味着他们会使用“屏幕截图”来窃取图像。

Answer 6

有些人已经说过不可能阻止人们下载你的照片了，诀窍可能是这样的：

$(document).ready(function()
{
    $('img').bind('contextmenu', function(e){
        return false;
    }); 
});

此技巧可防止右击所有img。显然，人们可以使用源代码中的链接打开源代码并下载图像。

Answer 7

以下是一些保护网站图片的方法。

<强> 1。在图像上放置透明层或低透明遮罩

通常，图片的来源在每个网页上公开。所以真实的图像在这个面具下面变得无法到达。确保蒙版图像的大小应与原始图像的大小相同。

<body> 
    <div style="background-image: url(real_background_image.jpg);"> 
        <img src="transparent_image.gif" style="height:300px;width:250px" /> 
    </div> 
</body>

<强> 2。使用脚本

将图像分成小单位

超级简单的图像切片脚本用于执行此操作。该脚本将真实图像分解为碎片并将真实图像隐藏为水印。这是保护图像的一种非常有用和有效的方法，但它会增加服务器加载每个图像切片的请求。

Answer 8

首先要意识到您永远无法完全停止下载图像，因为如果用户正在查看他们已经（暂时）在浏览器上下载的图像。

另外请记住，大多数用户可能不是Web开发人员，但他们仍可能会检查源代码。

我真的不鼓励禁用右键单击，这对最终用户来说非常令人沮丧并且无论如何都不安全，因为图像仍然可以拖入新窗口并下载。

我建议使用CampSafari使用的方法，即

img {
    pointer-events: none;
}

但有改进：

首先，请删除图片的网址，然后为其添加id个属性。像这样：

<img id="cutekitten">

接下来，我们需要添加一些JavaScript来实际显示图像。请远离您要保护的<img>标记：

document.getElementById("cutekitten").src = "http://placekitten.com/600/450";

现在我们需要使用CSS：

#cutekitten {
    pointer-events: none;
}

无法将图像拖动到新窗口，也可以通过右键单击下载。

JSFiddle

您可以使用的另一种方法是embed标记：

<embed src="http://placekitten.com/600/450"></embed>

这将阻止右键单击。

Answer 9

正如其他答案所说，如果你能看到它，你可以复制/下载它。

要添加其他答案，仅为了您的信息，您可以为图片添加隐形或棘手的水印： http://www.cgrats.com/create-an-invisible-watermark-in-photoshop.html（只是一个例子，有更多技巧，只是google用于隐形水印）

无论如何，如果你想证明图像的所有权，一个好的方法就是为自己制作一个更大的分辨率副本，并且总是发布一个更低分辨率/尺寸的副本。或者也可以在“公共”媒体上发布它，例如... deviantart或flickr，或者人们无法更改上传日期的内容。通过这种方式，您可以证明您在任何其他人之前拥有该图像

Answer 10

禁用右键单击所有图像

let allImages = document.querySelector("img");
allImages.forEach((value)=>{
    value.oncontextmenu = ()=>{
        return false;
    }
})

使用CSS禁用指针事件

img{
    pointer-events: none;
}

在所有图像上放置透明的叠加层

<div class="imageContainer">
    <div class="overlayDiv"></div>
    <img src="Image.jpg" alt="Image">
</div>

还有一些CSS

.imageContainer{
    position: relative;
}
img{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
}
.overlayDiv{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    background-color: transparent;
    z-index: 2;
}

将您的图像作为背景图像

div{
    background-image: url(Image.jpg);
    background-size: cover;
}

这些方法仅对普通用户有效，因为它们很可能不了解检查器或如何检查源代码。
但是Web开发人员可以轻松地下载这些文件，没有这样的方法可以完全禁用检查器。

Answer 11

我们知道没有适当的方法来避免图像被盗。但我们可以在一定程度上减少它。我们可以避免那些不喜欢计算机的人下载图像以及代码。以下是一些 JQuery技巧我们应该在我们的网站中包含减少图像被盗

禁用右键单击
禁用Ctrl +组合（按Ctrl + s，Ctrl + u）[最好禁用Ctrl键]

但是用户也可以使用Firefox中的开发者工具下载网页。我们没有这方面的解决方案，因为这将在客户端，由用户的浏览器提供。

您可以在堆栈溢出

上找到上面列出的所有代码

Answer 12

尝试这个-

<script>
    (function($){
      $(document).on('contextmenu', 'img', function() {
          return false;
      })
    })(jQuery);
  </script>

Answer 13

此代码将禁用Win上的右键单击或在Mac上单击并按住以打开“上下文菜单”

$("img").on("contextmenu",function(e){return false;});

它是如此简单，并且始终可以正常工作。并不取决于您使用的操作系统或浏览器。

Answer 14

我知道这个问题很老了，但我以前在这里没有看到过这个解决方案：

如果您将 <body> 标记重写为。

<body oncontextmenu="return false;">

您可以在不使用 javascript 的情况下阻止右键单击。

但是，您无法阻止使用 HTML 的键盘快捷键。为此，您必须使用 Javascript。

Answer 15

这是我的工作形式：content: url('https://myimage.png'); 在样式或 css 类中。比你不能右键单击并保存图像。

img.my-image-class{
            content: url('https://myimage.png');
        }

您也可以将图像转换为 base64 并像下面这样放置。所以如果你想下载图片你需要使用开发者工具，而不是找到类，而不是复制base64，如果图像很大，你需要解码这个base64，你就会有图像。所以它仍然可以下载图像。即使不可能，用户也可以对网页上的图像进行屏幕截图并用油漆或使用切割工具对其进行剪切。

img.my-image-class{
                content: url(data:image/gif;base64,...img base64.....);
            }

将 IMG 转换为 Base64：https://www.base64-image.de/

解码 Base64：https://codebeautify.org/base64-to-image-converter

参考：How to reuse base64 image repeatedly in HTML file

保护图像下载

15 个答案:

第一种方式

第二种方式

第三种方式

注意