V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zeonll
V2EX  ›  程序员

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

  •  
  •   zeonll · 2023-03-24 10:35:00 +08:00 · 2860 次点击
    这是一个创建于 601 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本人前端小白

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

    18 条回复    2023-03-24 16:48:41 +08:00
    InDom
        1
    InDom  
       2023-03-24 10:36:39 +08:00
    盲猜: 用作为背景图,或者是上面再覆盖一个新图层.
    noe132
        2
    noe132  
       2023-03-24 10:38:55 +08:00
    图片上贴了层膜你就摸不到了
    TianQian
        3
    TianQian  
       2023-03-24 10:42:12 +08:00
    一楼正解
    lemen
        4
    lemen  
       2023-03-24 10:42:44 +08:00
    直接 f12 看就是把图片设定为背景了吧,直接把里边的 url 复制出来打开就能复制了
    Yeen
        5
    Yeen  
       2023-03-24 10:44:32 +08:00
    1 禁用 /挡住右键、右键菜单
    2 自己做个菜单。
    但是稍微懂点技术的人都可以绕开。
    corcre
        6
    corcre  
       2023-03-24 10:46:16 +08:00
    看了一下图片有 save as 功能, 但是下载下来是错误的图片, 图片放到背景图里面去了, 打开 F12 还是能下载下来找到对应的 url 还是能直接打开然后下载的, 视频没研究
    ONEBOYS
        7
    ONEBOYS  
       2023-03-24 11:02:00 +08:00
    捕获 contextmenu 事件可行,但是开发者模式下肯定能破解。
    lisxour
        8
    lisxour  
       2023-03-24 11:07:48 +08:00
    太多方法了吧,最常见的也是最常规的

    1. background-image
    2. blob
    3. 元素遮盖或偏移
    4. canvas
    pipiking
        9
    pipiking  
       2023-03-24 14:02:06 +08:00
    小红书 web 端上的图片的水印是不是不是覆盖了一个新图层啊?好像加载出来就是有水印的?有无传道解惑的?
    cheeto
        10
    cheeto  
       2023-03-24 14:06:49 +08:00   ❤️ 2
    @pipiking 不是,输出到前端就是带有水印的图片链接,抓包看一下就行
    zeonll
        11
    zeonll  
    OP
       2023-03-24 14:12:29 +08:00
    @cheeto 肉眼看的时候没有水印吧
    greatbody
        12
    greatbody  
       2023-03-24 14:16:55 +08:00
    不要显示图片就可以防止图片被顺走了。

    只要你显示了图片,总有办法拿到。
    cheeto
        13
    cheeto  
       2023-03-24 14:30:01 +08:00
    @zeonll 啊?难道小红书 web 端有 AB 测试吗,我这边看每张图片的中间都有“小红书”三个字
    Kakus
        14
    Kakus  
       2023-03-24 14:33:18 +08:00
    <div style="background: url(xxx);"></div>

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

    可以按 F12 ,找到这个元素,然后找到图片地址
    pipiking
        15
    pipiking  
       2023-03-24 14:43:39 +08:00
    @cheeto 是每张图片的中间都有“小红书”三个字的。应该就是输出到前端是带水印的,得抓包才能看到无水印的图了看来 qaq ,感谢
    hervey0424
        16
    hervey0424  
       2023-03-24 14:49:58 +08:00   ❤️ 2
    @greatbody 我他妈直接截图
    syseven
        17
    syseven  
       2023-03-24 15:10:29 +08:00   ❤️ 1
    非常简单
    css:{
    pointer-events: none;
    }
    Yukiteru
        18
    Yukiteru  
       2023-03-24 16:48:41 +08:00
    一般要么是禁用右键菜单要么是把图片设为背景了,都很容易就能从 devtools 里找出来。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1497 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:18 · PVG 01:18 · LAX 09:18 · JFK 12:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.