是否可以在网页上创建无法由最终用户复制或保存的图像

Question

在某些网页上,无法复制或保存背景图像.我使用的浏览器无法将其识别为图像.

我的问题是: 我想知道如何在网页上创建一个无法被用户复制的图像.

例如:在这个github帮助页面上,写入标题的背景图像无法复制并保存在我正常使用的浏览器中.

可能是图像是由javascript代码或其他语言创建的图形？

Answer 1

链接中的标题图像是从其CSS中的BASE64编码图像字符串生成的.任何现代浏览器都可以理解这种类型的图像并解析它.在这种情况下,图像是编码的SVG(可缩放矢量图形)图像,但它也可以是JPEG,PNG,GIF或BMP图像.

在源代码中,您将看到一个带有背景图像的div,它看起来像一个非常长的乱码字符串:

<div style="background-image: url(data:image/svg+xml;base64, BASE64-ENCODED-IMAGE-STRING">

(将BASE64-ENCODED-IMAGE-STRING替换为页面源中的原始版本)

例如,在此网站上,您可以生成BASE64编码的图像字符串.

但是,这并不意味着用户无法保存或复制图像!

例如,使用此网站,您可以以最终用户可以保存/复制的形式解码图像:http: //freeonlinetools24.com/base64-image.

正如@aavrug在下面指出的那样,这也可以在任何浏览器中使用开发人员的工具来完成.

正如其他用户所指出的那样,某些浏览器确实提供了在使用鼠标右键单击时保存背景图像的选项

正如@Viktor Mellgren所指出的那样:此外,还有截图

结论

一旦图像在浏览器中,它可以由最终用户保存.为了更好地保护您的图像,请查看使用专用工具或脚本对它们进行水印:

• Photoshop的例子
• 用于添加水印的PHP示例脚本

Answer 2

可以保存所有图像:

您可以将图像转换为base64字符串,如另一个答案所示,但仍然可以保存和复制.

如何？

只需复制图像字符串http://codebeautify.org/base64-to-image-converter即可获得可下载的图像.

Answer 3

知识就是力量:

1. 打开Chrome并转到https://guides.github.com/activities/hello-world/
2. 右键单击所需的"图像"
3. 点击"检查"
4. 查看"样式"选项卡
5. 右键单击element.style- > background-image- > url- >blue hyperlink containing data:image
6. 点击"在新标签页中打开链接"
7. Ctrl+s

基本上,如果您的Web浏览器呈现某些内容,那么它是可保存/可下载的,期间.

Answer 4

由于每个人都解释了如何获取图像的base64代码并将其粘贴到转换器中,还有另一种选择.更简单:用Firefox打开有问题的页面.从上下文菜单中选择"查看页面信息".选择"媒体"标签.从列表中选择图像.

无需转换base64代码.Firefox已经为您提供了图像和"另存为..."按钮.

Answer 5

每个图像发送到浏览器,可以以某种方式复制.通过禁用右键单击oncontextmenu和鼠标拖动,您可以使非技术人员变得更加困难ondrag.这将阻止用户右键单击图像并保存图像,并将其拖动到桌面.

但是,正如我所说的,以及其他许多人也在说,是否总是可以下载发送到浏览器的信息 - 无论是哪种方式.