保护图像不被右键单击下载
我确实知道没有可靠的方法可以完全保护图像不被下载。此方法是为了防止临时用户通过简单的右键单击来下载。最好的方法可能就是简单地对您的图像进行版权保护,如果您非常担心,可以使用像 Digimarc 这样的服务来为您的图像添加数字水印。现在问题是:
我遇到一个网站,它在实际图像上使用 GIF 叠加层,这样可以防止用户右键单击并下载图像(尽管您仍然可以从代码中获取实际图像)。他们用来执行此操作的代码是:
<div><img src="-Transparent GIF File-" alt="" width="530" height="558"
border="0" original="-Actual Image Displayed-" /></div>
我的问题是 original
标签不是真正的标签,而是由某种 Javascript 使用和翻译的。我想在我的网站上复制这个。有人可以帮我找到这个脚本或重现效果吗?
I do know that there is no sure fire way to fully protect an image from being downloaded. This method is to prevent the casual user from downloading by simple right click. The best way probably would be simply copyrighting your images and if you are very concerned would be using a service like Digimarc to digitally watermark your image. Now to the question:
I came across a site that is using a GIF overlay over their actual image so it protects the image from users right clicking and downloading the image (though you can still grab the actual image from within the code). The code they use to do this is:
<div><img src="-Transparent GIF File-" alt="" width="530" height="558"
border="0" original="-Actual Image Displayed-" /></div>
My question is the original
tag is not a real tag and is used and translated by Javascript of some sort. I would like to replicate this on my site. Can someone help me find this script or reproduce the effect?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是毫无意义的。如果浏览器显示图像,则可以拍摄该图像。任何阻止这种情况的尝试都只是网站开销,可以非常轻松规避。
最好的保护方法是在图像本身上添加版权声明。
无论如何,如果您确实想交换
原始
属性,您可以...演示这里
但是...这不会阻止用户选择和保存与
original
属性相关的图像。This is pointless. If a browser displays an image, it can be taken. Any attempt to prevent that is merely site overhead that can very easily be circumvented.
You're best protection is to put a copyright notice on the images themselves.
In any event, if you really want to swap the
original
attribute you can...Demo here
but... that doesn't do anything to prevent the user selecting and saving the image tied tot eh
original
attribute.对于您想要完成的任务,一个更简单的解决方案是将所有这些属性添加到 img 标签中:
另外,为了可选地使图像打印更小,请将其添加到 img 标签中:
并包含以下相关的 CSS:
A simpler solution for what you're trying to accomplish is to add all of these attributes to the img tag:
Also, to optionally make the image print smaller, add this to the img tag:
And include this related CSS:
这是我对图像进行轻度保护的实现。
它将在图像(或文本)上创建一个透明的覆盖 DOM 元素。如果禁用 JavaScript,图像将被隐藏,如果移除盖子,鼠标悬停时图像将被隐藏。右键单击图像也被禁用。
你可以随时打印屏幕、从下载的资源中抓取等等。这只会过滤最基本的下载方式。但为了更方便的保护,您必须隐藏图像路径并渲染到画布对象。
您可以改进这一点,但总有一种方法可以获取图像。
已在主要浏览器上进行测试并正常工作!
HTML
JAVASCRIPT + JQUERY
CSS
This is my implementation for a light protection of images.
It will create a transparent cover DOM element over the image (or text). If you disable javascript the image will be hidden and if you remove the cover the image will be hidden on mouse over. Also right click on images is disabled.
You can always printscreen, grab from the downloaded resources, etc, etc. This will only filter the most basic ways of download. But for a more convenient protection you have to hide the image path and render to a canvas object.
You can improve this, but there is always a method to get the image.
Tested on major browsers and working!
HTML
JAVASCRIPT + JQUERY
CSS