选项1

Question

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

我的问题是： 我想知道如何在网页上创建无法由用户复制的图片。

例如：在这个github help page上，写入标题的背景图像无法复制并保存在我正常使用的浏览器中。

可能是图片是由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替换为页面源中的原始版本）

例如，

On this website，您可以生成BASE64编码的图像字符串。

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

例如，使用此网站，您可以解码   最终用户可以保存/复制的表单中的图像：   http://freeonlinetools24.com/base64-image

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

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

正如@Viktor Mellgren指出的那样： 此外，总有截图

<强>结论

图像在浏览器中后，最终用户可以保存。为了更好地保护您的图像，请查看使用专用工具或脚本对其进行水印处理：

Answer 2

可以保存所有图像：

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

怎么样？

只需在此处复制图片字符串http://codebeautify.org/base64-to-image-converter，即可获得可下载的图片。

Answer 3

知识就是力量：

打开Chrome并转到https://guides.github.com/activities/hello-world/
右键点击所需的“图片”
点击“检查”
查看“样式”标签
右键点击element.style - ＆gt; background-image - ＆gt; url - ＆gt; blue hyperlink containing data:image
点击“在新标签页中打开链接”
控制 + 取值

基本上，如果您的网络浏览器呈现某些内容，那么它是可以保存/可下载的，期限。

Answer 4

由于每个人都解释了如何获取图像的base64代码并将其粘贴到转换器中，还有另一种选择。更简单：使用Firefox打开相关页面。选择查看页面信息＆＃39;从上下文菜单中。选择媒体＆＃39;标签。从列表中选择图像。

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

Answer 5

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

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

Answer 6

嗯，这是base64编码的图像字符串：在b64.io处尝试当我将相关图像放到这个网站时，我得到了这个：

var myMessageQueue = new SnackbarMessageQueue(TimeSpan.FromMilliseconds(8000));
MySnackbar.MessageQueue = myMessageQueue;

好吧，我能够查看图像并将其保存到磁盘，没有任何问题（来自您提到的github链接）。由于某些Firefox插件，我不确定它是否适用于我，或者它只适用于Firefox。

当我右键单击背景图像时，我看到选项＆＃34; 查看背景图像，当我查看图像时，我看到了：

/* file size: 3.2ko | already optimized | base64 size: 4.2ko */
.index {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iNDQwIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoMTI3LCA1NCwgNjApIi8+PHJlY3QgeD0iMCIgeT0iNSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTUiIG9wYWNpdHk9IjAuMTA2NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIyOSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTgiIG9wYWNpdHk9IjAuMTMyNjY2NjY2NjY2NjY2NjUiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSI1NyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSI4MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTMiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIxMTMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMTM3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjAiIHk9IjE2OSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSIxODQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjciIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIxOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjIwIiBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMjMzIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNiIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjI2MSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iNSIgb3BhY2l0eT0iMC4wMiIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjAiIHk9IjI3MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTQiIG9wYWNpdHk9IjAuMDk4IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMjk4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjMyNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSIzNTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEzIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMCIgeT0iMzc3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1IiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMCIgeT0iMzk4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNiIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjQzMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iOSIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY2NjY3IiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMjkiIHk9IjAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY2NjY1IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iNTciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iODIiIHk9IjAiIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMTEzIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjEzNyIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIxNjkiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMTg0IiB5PSIwIiB3aWR0aD0iNyIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAzNzMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMTk4IiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xNSIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjIzMyIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIyNjEiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIyNzIiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA5OCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjI5OCIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIzMjciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMzU1IiB5PSIwIiB3aWR0aD0iMTMiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjM3NyIgeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wMiIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjM5OCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSI0MzEiIHk9IjAiIHdpZHRoPSI5IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDU0NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiLz48L3N2Zz4=);
}

正如其他人所说，你可以使用base64编码的图像字符串作为图像，现代浏览器可以理解它。如果你解码它，它就像：数据：＆lt;类型＆gt;，＆lt;编码＆gt;，＆lt;编码数据字符串＆gt;

因此，有问题的图像是SVG图像，当您在浏览器中打开它并尝试使用以下命令保存它：Command + S / Ctrl + S时，它将正确识别图像类型为svg。

Answer 7

最重要的是：不要在互联网上放任何东西，绝对不希望别人下载。下载你不应该下载的图像是我在早期Netscape时代学到的第一个技巧之一，我并不孤单。

如果您想销售图片内容，请仅发布低质量的部分样本或添加水印。添加一些版权说明，说明图像是您的财产，未经您的同意（或补偿），不允许在其他任何地方发布图像，以便买方不会随意分发图像。

使用base 64编码等有其好处。首先，用户不能不小心将图像误点击为桌面背景。其次，人们必须做一些工作来获得图像，以便他们可能意识到他们不应该这样做，并且可能会考虑是否值得这么麻烦。此外，如果它妨碍图像搜索引擎，那么它严重限制了“未经授权”的复制。

我没有统计数据支持我的话，但根据我的经验，UI设计人员（等等）从图像搜索结果中获取了大量内容。从UI草图中，这些图像会意外地进入生产或营销等。因此，如果您的图像最终出现在图像搜索引擎中，那么互联网就拥有它。

Answer 8

此外，它可能不是图像而是由图形创建的图形一些javascript或其他语言的代码？

选项1

在html中使用svg标签。这仍然不是复制证明，但减少了复制选项：

查看源html并将其复制
截图

大多数图形工具，Photoshop等都有矢量或svg模式，可以将您在该模式下创建的图像导出为html标记，如下所示：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>

用户将无法右键单击并保存此图像，但他们将能够检查并窃取代码本身。

选项2

使用Javascript和HTML画布以编程方式绘制图像。

用户可以复制的方式：

从浏览器中窃取JS代码（超级简单，但只有在计划显示时才有用支持画布的某个平台上的图像）
截图

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

我的两分钱，要么使用你担心的水印或低分辨率版本的图像。你放在网站上的任何东西对于那些知道他们要复制什么的人来说都是微不足道的。上述选项很有趣，也很有趣，但最终对开发人员来说是很多工作，并且只有一次关键击败。

最后的想法

可能会降低普通乔复制能力的最后一个想法是，需要保留十个不同的键才能特别看到图像。像其他选项一样，任何知道他们正在做什么的人都可以避开这种情况，但是普通用户在他的其他手指被占用时难以击中PrtScn。不是最好的用户体验...但是嘿：）

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

8 个答案:

选项1

选项2

最后的想法