网页上如何做到右键无法保存图片？

[zeonll]

本人前端小白

最近看小红书的 web 端，有几个疑惑： 1.右键图片没有 Save as 功能 2.资源的地址是如何被掩藏起来的，比如图片下载链接和视频下载链接

[InDom]

盲猜: 用作为背景图,或者是上面再覆盖一个新图层.

[noe132]

图片上贴了层膜你就摸不到了

[TianQian]

一楼正解

[lemen]

直接 f12 看就是把图片设定为背景了吧，直接把里边的 url 复制出来打开就能复制了

[Yeen]

1 禁用 /挡住右键、右键菜单
2 自己做个菜单。
但是稍微懂点技术的人都可以绕开。

[corcre]

看了一下图片有 save as 功能, 但是下载下来是错误的图片, 图片放到背景图里面去了, 打开 F12 还是能下载下来找到对应的 url 还是能直接打开然后下载的, 视频没研究

[ONEBOYS]

捕获 contextmenu 事件可行，但是开发者模式下肯定能破解。

[lisxour]

太多方法了吧，最常见的也是最常规的

1. background-image
2. blob
3. 元素遮盖或偏移
4. canvas

[pipiking]

小红书 web 端上的图片的水印是不是不是覆盖了一个新图层啊？好像加载出来就是有水印的？有无传道解惑的？

[cheeto]

@pipiking 不是，输出到前端就是带有水印的图片链接，抓包看一下就行

[zeonll]

@cheeto 肉眼看的时候没有水印吧

[greatbody]

不要显示图片就可以防止图片被顺走了。

只要你显示了图片，总有办法拿到。

[cheeto]

@zeonll 啊？难道小红书 web 端有 AB 测试吗，我这边看每张图片的中间都有“小红书”三个字

[Kakus]

<div style="background: url(xxx);"></div>

这样浏览器不会识别为图片，右键就没有保存选项

可以按 F12 ，找到这个元素，然后找到图片地址

[pipiking]

@cheeto 是每张图片的中间都有“小红书”三个字的。应该就是输出到前端是带水印的，得抓包才能看到无水印的图了看来 qaq ，感谢

[hervey0424]

@greatbody 我他妈直接截图

[syseven]

非常简单
css：{
pointer-events: none;
}

[Yukiteru]

一般要么是禁用右键菜单要么是把图片设为背景了，都很容易就能从 devtools 里找出来。