如何防止图像保存+阻止图像拖放到桌面+防止桌面浏览器上的屏幕截图

Question

防止以下情况的最佳做法/方法/语言是什么：

• Image SaveAs
• 图片拖放到桌面
• 截图/屏幕抓取

在桌面浏览器上

..

（在尝试截图时见证了使用'黑屏'，以及'不可触摸'的图像的实现......）

Answer 1

No Drag＆amp;降

document.getElementById('my-image').ondragstart = function() { return false; };

防止“另存为”（不是真正阻止但减慢一点）的一种方法是使用链接到图像的内联样式创建一个div。

<div style="width: 200px; height: 200px; background: url('yourcraphere.jpg');"></div>

我几乎可以肯定你无法禁用屏幕截图。截图不依赖于浏览器权限，这是操作系统的事情。如果用户点击打印屏幕按钮，您可以尝试将所有内容都白化吗？

用户始终可以使用开发人员工具查看您的资源，并抓取您正在使用的任何图像。希望这些方法有助于防止大多数人窃取您可能想要保持安全的任何内容......您也可以尝试使用水印。希望有所帮助。

Answer 2

要阻止用户右键单击图像并选择“另存为”，您可以添加代码oncontextmenu="return false"。 oncontextmenu检测到用户右键单击并return false停止操作。

然后，如果您执行代码draggable="false"，则用户无法拖动图像，即使他们选择了该图像。我认为没有办法阻止人们使用屏幕抓取工具，但这里有一些代码可以阻止谷歌图片和其他搜索引擎抓取图像：<meta name="robots" content="noimageindex"></meta>。

总而言之，请尝试以下方法：将<meta name="robots" content="noimageindex"></meta>放在文档的头部，然后在文档正文中放置<img src="mygreatimage.png" alt="An awesome image" oncontextmenu="return false" draggable="false">。