小智 57
删除"保存图像"上下文菜单的另一种方法是使用一些CSS.这也使上下文菜单的其余部分保持不变.
img {
pointer-events: none;
}
它使所有img元素都不会对任何鼠标事件做出反应,例如拖动,悬停,点击等.
有关详细信息,请参阅规范
Afz*_*han 47
实际上没有办法阻止用户执行特定任务.但你总能采取措施!图像共享网站拥有庞大的开发人员团队日夜工作,以创建这样一种算法,防止用户保存图像文件.
试试这个:
$('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权限,这样他就可以毫无问题地阅读所有文件.图像文件的问题也是如此.他可以读取图像文件,然后他可以轻松保存它们.他在浏览您的网站时首先下载图像.所以他没有问题将它们保存在磁盘上.
Tza*_*ach 11
没有办法保护图像下载.这是因为图像必须由浏览器下载才能被用户看到.有一些技巧(如您指定的透明背景)限制某些操作,如图像右键单击和保存到浏览器缓存文件夹,但没有办法真正保护图像.
小智 11
如果它只是图像,则JavaScript不是必需的.尝试在你的html文件中使用它:
<img src="sample-img-15.jpg" alt="#" height="24" width="100" onContextMenu="return false;" />
有些人已经说过不可能阻止人们下载你的照片了,诀窍可能是这样的:
$(document).ready(function()
{
$('img').bind('contextmenu', function(e){
return false;
});
});
这个技巧阻止了右键单击所有img.显然,人们可以使用源代码中的链接打开源代码并下载图像.
没有完全防范方法可以防止您的图像被下载/被盗.
但是,一些解决方案,如:为您的图像添加水印(从客户端或服务器端),实现背景图像,禁用/防止右键单击,将图像切成小块然后作为完整图像呈现给浏览器,您也可以使用闪存来显示图像.
就个人而言,推荐的方法是:水印和闪光.但这是一项艰巨而且几乎不可能完成的任务.只要用户能够"看到"该图像,就意味着他们会使用"屏幕截图"来窃取图像.
小智 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.使用脚本将图像分成小单位
超级简单的图像切片脚本用于执行此操作.该脚本将真实图像分解为碎片并将真实图像隐藏为水印.这是一种非常有用且有效的保护图像的方法,但它会增加服务器加载每个图像切片的请求.
在此处查看更多信息.
首先要意识到你永远无法完全停止下载图像,因为如果用户正在查看他们已经(暂时)在浏览器上下载的图像.
另外请记住,大多数用户可能不是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;
}
无法将图像拖动到新窗口,也可以通过右键单击下载.
您可以使用的另一种方法是embed标记:
<embed src="http://placekitten.com/600/450"></embed>
这将阻止右键单击.
let allImages = document.querySelectorAll("img");
allImages.forEach((value)=>{
value.oncontextmenu = (e)=>{
e.preventDefault();
}
})
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 开发人员可以轻松下载这些文件，您无法完全禁用检查器。
最后我想补充几句。
从技术上讲，现在想想你正在通过 HTTP 从你的服务器向另一台计算机发送一个图像，同时你试图阻止它，这没有任何意义......
您应该始终假设进入用户机器的任何内容现在或以后都可以检索回来，无论您多么努力，都可以通过加密来隐藏它，或者像 youtube 一样，将这些东西分块发送，然后在浏览器中收集它们。
最终获取图像对于普通用户来说很难，但对于具有很多技术背景的人来说则不然，也许他们正在操作系统级别拦截整个网络，您将如何阻止他们。
| 归档时间： |
|
| 查看次数： |
76762 次 |
| 最近记录： |