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

How to Prevent Image SaveAs + Prevent Image Drag&Drop to Desktop + Prevent Screenshot on a Desktop Browser

本文关键字：桌面 图像 浏览器 屏幕截图 拖放 amp 另存为 何防止 拖动      更新时间：2023-09-26

预防以下情况的最佳实践/方法/语言有哪些：

  • 图像另存为
  • 图像拖动&拖放到桌面
  • 屏幕截图/截屏

在桌面浏览器上

（亲眼目睹了在尝试截屏时使用"黑屏"，以及实现"不可触摸"的图像。）

无阻力&丢弃

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

防止"另存为"的一种方法是创建一个具有内联样式的div，链接到图像。

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

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

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

为了防止用户右键单击图像并选择"另存为"，可以添加代码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">放在文档正文中。

相关文章：