Html 保护图片下载

Protect image download

提问by web-tiki

I know the best way to protect image download is not putting it on internet in the first place.

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

I assume there is no 100% protection against image download and that if a user can see an image on internet he can with a bit of experience find access to download it.

我假设没有 100% 的图像下载保护，如果用户可以在互联网上看到图像，他可以通过一些经验找到下载它的权限。

I am aware of transparent .gifor .pngcovering the images or using background_imageCSS property to protect it and prevent right click download but are there

我知道透明.gif或.png覆盖图像或使用background_imageCSS 属性来保护它并防止右键单击下载但存在

other ways to complicate image download and therefore prevent image download by most users?

其他使图像下载复杂化并因此阻止大多数用户下载图像的方法？

Here is simple code to start with :

这是开始的简单代码：

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

回答by CampSafari

Another way to remove the "save image" context menu is to use some CSS. This also leaves the rest of the context-menu intact.

删除“保存图像”上下文菜单的另一种方法是使用一些 CSS。这也使上下文菜单的其余部分完好无损。

img {
    pointer-events: none;
}

It makes all imgelements non-reactive to any mouse events such as dragging, hovering, clicking etc.

它使所有img元素对任何鼠标事件（如拖动、悬停、单击等）都无反应。

See specfor more info.

有关更多信息，请参阅规范。

回答by Afzaal Ahmad Zeeshan

No there actually is no way to prevent a user from doing a particular task. But you can always take measures! The image sharing websites have a huge team of developers working day and night to create such an algorithm where you prevent user from saving the image files.

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

First way

第一种方式

Try this:

尝试这个：

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

So the user won't be able to click on the Save Image As... option from the menu and in turn he won't get a chance to save the image.

因此，用户将无法单击菜单中的“将图像另存为...”选项，进而他也没有机会保存图像。

Second way

第二种方式

Other way is to use background-image. This way, the user won't be able to right click and Save the Image As... But he can still see the resources in the Inspector.

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

Third way

第三种方式

Even I am new to this one, few days ago I was surfing Flickr when I tried to right click, it did not let me do a thing. Which in turn was the first method that I provided you with. Then I tried to go and see the inspector, there I found nothing. Why? Since they were using background-imageand at the same time they were using data:imagesourceas its location.

即使我是新手，几天前我在浏览 Flickr 时尝试右键单击，它并没有让我做任何事情。这反过来是我为您提供的第一种方法。然后我试图去见检查员，在那里我什么也没找到。为什么？因为他们正在使用background-image并且同时他们正在使用data:imagesource它作为它的位置。

Which was amazing for me too. You can precvent user from saving image files this way easily.

这对我来说也很棒。您可以轻松地防止用户以这种方式保存图像文件。

It is known as Data URI Scheme: http://en.wikipedia.org/wiki/Data_URI_scheme

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

Note

笔记

Please remember brother, when you're letting a user surf your website you're giving him READ permissions on the server side so he can read all the files without any problem. The same is the issue with image files. He can read the image files, and then he can easily save them. He downloads the images on the first place when he is surfing your website. So there is not an issue for him to save them on his disk.

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

回答by Tzach

There is no way to protect image downloading. This is because the image has to be downloaded by the browser for it to be seen by the user. There are tricks (like the transparent background you specified) to restrict certain operations like image right click and saving to browser cache folder, but there isn't a way for truly protecting the images.

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

回答by Olaoluwa Fabuyi

If it is only image then JavaScript is not really necessary. Try using this in your html file :

如果它只是图像，那么 JavaScript 并不是真正必要的。尝试在您的 html 文件中使用它：

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

回答by Simon

First realise that you will never be able to completely stop an image being downloaded because if the user is viewing the image they have already downloaded it (temporarily) on their browser.

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

Also bear in mind the majority of users will probably not be web developers but they may still examine the source code.

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

---

---

I really discourage disabling right click, this can be extremely frustrating for the end userand is not safe anyway since the image can still be dragged into a new window and downloaded.

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

I would suggest the method used by CampSafarii.e.

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

img {
    pointer-events: none;
}

but with an improvement:

但有一个改进：

So first lets remove the url of your image and add an idattributes to it. Like so:

因此，首先让我们删除图像的 url 并id为其添加属性。像这样：

<img id="cutekitten">

Next we need to add some JavaScript to actually show the image. Keep this well away from the <img>tag you are trying to protect:

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

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

Now we need to use the CSS:

现在我们需要使用 CSS：

#cutekitten {
    pointer-events: none;
}

The image cannot be dragged into a new window as well downloaded via right click.

图像不能拖到新窗口中，也不能通过右键单击下载。

JSFiddle

JSFiddle

---

---

Yet another method you could use is the embedtag:

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

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

This will prevent the right click.

这将阻止右键单击。

回答by Mark

As some people already said that it is not possible to prevent people to download your pictures, a trick could be something like this:

正如有些人已经说过阻止人们下载你的图片是不可能的，一个技巧可能是这样的：

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

This trick prevents from the right click on all img. Obviously people can open the source code and download the images using links in your source code.

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

回答by Bhavesh Gangani

There is no full-proof method to prevent your images being downloaded/stolen.

没有完全的方法可以防止您的图像被下载/窃取。

But, some solutions like: watermarkingyour images(from client side or server side), implement a backgroundimage, disable/prevent right clicks, slice imagesinto small piecesand then present as a complete image to browser, you can also use flashto show images.

但是，一些解决方案，如：水印的图像（从客户端或服务器端），实现一个背景图像，禁用/防止右点击，切片图像成小片，然后存在于浏览器的一个完整的图像，还可以使用闪光灯来显示图像。

Personally, recommended methods are: Watermarking and flash. But it is a difficult and almost impossible mission to accomplish. As long as user is able to "see" that image, means they take "screenshot" to steal the image.

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

回答by user3693466

Here are a few ways to protect the images on your website.

以下是保护网站图像的几种方法。

1. Put a transparent layer or a low opaque mask over image

1. 在图像上放置透明层或低不透明蒙版

Usually source of the image is open to public on each webpage. So the real image is beneath this mask and become unreachable. Make sure that the mask image should be the same size as the original image.

通常图像的来源在每个网页上都是公开的。所以真实的形象在这个面具之下，变得遥不可及。确保遮罩图像应与原始图像大小相同。

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

2. Break the image into small units using script

2. 使用脚本将图像分成小单元

Super simple image tiles script is used to do this operation. The script will break the real image into pieces and hide the real image as watermarked. This is a very useful and effective method for protecting images but it will increase the request to server to load each image tiles.

超级简单的图像平铺脚本就是用来做这个操作的。该脚本会将真实图像分成几部分并将真实图像隐藏为水印。这是一种非常有用且有效的图像保护方法，但它会增加对服务器加载每个图像块的请求。

回答by blacksheep

1. Disable the Right Click on all Images

1. 禁用右键单击所有图像

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

1. Disable the Pointer Event Using CSS

2. 使用 CSS 禁用指针事件

img{
    pointer-events: none;
}

1. Put a transparent overlay over all the Images

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

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

And some CSS like this

还有一些像这样的 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;
}

1. Put your Image as a Background Image

4. 将您的图像作为背景图像

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

These methods will only work on normal users because they most probably don't know about the inspector or how to check source code.
But a web developer can easily dowlnload these files, there is no such way you can disable the inspector completely.

这些方法仅适用于普通用户，因为他们很可能不了解检查器或如何检查源代码。
但是 Web 开发人员可以轻松下载这些文件，您无法完全禁用检查器。

回答by Shamsul Huda

Try this one-

试试这个——

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