• 请不要在回答技术问题时复制粘贴 AI 生成的内容
rizon
V2EX  ›  程序员

把图片变成可点击的组件— 一个简单但好用的前端库

  •  1
     
  •   rizon ·
    othorizon · May 17 · 2431 views
    https://clickable-img.dev.noteloom.app/

    这是我之前做公司的项目时顺手做的一个前端库。
    我们的微信小程序有一个弹窗,运营经常要更新,弹窗里还有多个点击热区,我就想 UI 出完图后,运营自己配置一下就可以热更新,就不用再改代码了。所以就有了这个工具。
    上传一个图片,可视化圈选热点区域,配置点击事件。
    代码里监听图片的点击事件即可。

    东西很简单,原理也很简单。不过确实能在某些特定场景下省下很多事情。
    17 replies    2026-05-19 09:06:56 +08:00
    yanx1n
        1
    yanx1n  
       May 17
    可以的,不过创建第一个热区的时候拖拽很卡,后面没问题
    mxm145
        2
    mxm145  
       May 18
    非常好用,要是能支持不规则区域就完美了
    waelun
        3
    waelun  
       May 18
    很有创意 问了好几个 ai 都是通过定位 div 实现
    andyskaura
        4
    andyskaura  
       May 18
    是放在元数据的吗?如果能在编辑器中集成压缩功能就更好了。
    webnoob
        5
    webnoob  
       May 18
    Uncaught Error: Invalid PNG: IEND chunk not found
    wonderfulcxm
        6
    wonderfulcxm  
       May 18   ❤️ 1
    其他上古的 Dreamweaver 就有这个功能,甚至支持不规则区域。
    TimPeake
        7
    TimPeake  
       May 18
    koor
        8
    koor  
       May 18
    这种的无障碍要怎么做呢?
    rizon
        9
    rizon  
    OP
       May 18
    @TimPeake 这种方案也是也是可以,只不过不是很通用,比如微信小程序里
    rizon
        10
    rizon  
    OP
       May 18
    @webnoob 现在只支持 PNG 图,虽然 JPG 也可以去适配,不过暂时没做。png 和 jpg 的 meta 格式不一样
    rizon
        11
    rizon  
    OP
       May 18
    @andyskaura 嗯,放在元数据里的。压缩图片然后写 meta 是吗,这倒是能方便不少。 看需求吧,如果用的人多,就继续迭代。我本来还打算加上加密功能,毕竟元数据是公开的。
    rizon
        12
    rizon  
    OP
       May 18
    @mxm145 嗯嗯,后面看看找时间加一下。
    rizon
        13
    rizon  
    OP
       May 18
    @yanx1n 好的,优化下
    rizon
        14
    rizon  
    OP
       May 18
    @koor 你可以用我提供的 core 包,然后自己去设置无障碍标识属性就好。core 包就是只有最核心的 util 的基础包,页面上如何渲染和处理热区都是自己发挥就好。
    nzbin
        15
    nzbin  
       May 18
    @wonderfulcxm #6 我印象中 Dreamweaver 是通过 map 标签实现的,确实功能更强
    wonderfulcxm
        16
    wonderfulcxm  
       May 18 via iPhone
    @nzbin 应该是,很少人知道这个功能,用过 DW 的都暴露年龄了。😂
    webnoob
        17
    webnoob  
       May 19
    @rizon 好的好的 谢谢
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   949 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 19:32 · PVG 03:32 · LAX 12:32 · JFK 15:32
    ♥ Do have faith in what you're doing.