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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1138 days ago, the information mentioned may be changed or developed.

本人前端小白

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

图片

链接

Save

右键

18 replies • 2023-03-24 16:48:41 +08:00

InDom

Mar 24, 2023

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

noe132

Mar 24, 2023

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

TianQian

Mar 24, 2023

一楼正解

lemen

Mar 24, 2023

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

Yeen

Mar 24, 2023

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

corcre

Mar 24, 2023

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

ONEBOYS

Mar 24, 2023

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

lisxour

Mar 24, 2023

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

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

pipiking

Mar 24, 2023

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

cheeto

Mar 24, 2023

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

zeonll

Mar 24, 2023

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

greatbody

Mar 24, 2023

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

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

cheeto

Mar 24, 2023

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

Kakus

Mar 24, 2023

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

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

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

pipiking

Mar 24, 2023

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

hervey0424

Mar 24, 2023

@greatbody 我他妈直接截图

syseven

Mar 24, 2023

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

Yukiteru

Mar 24, 2023

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