V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
rizon
V2EX  ›  程序员

因为不想反复上线,我把图片变成直接可点的组件了

  •  
  •   rizon ·
    othorizon · 10 小时 30 分钟前 via Android · 618 次点击

    先打个预防针,企业里是有更多标准化的解决方案的,我这个方案就是图个方便省事。

    背景

    我们有个小程序里有一个弹窗,弹窗里有个蛮复杂的 ui 设计,然后点击不同的内容会打开对应的视频进行播放。
    我考虑到视频内容肯定会增加,那就不能写死代码。这个 ui 比较复杂然后又只是个小弹窗,感觉实在没必要用代码去实现了。
    但是图片更新起来快啊,oss 里上传一下就完事。考虑到以后有类似的需求都可以偷个懒,于是就做了这个小工具。

    功能

    简单说就是给图片上加上热区,每个热区可以配置点击后的事件。

    当 ui 更新新的图片后,打开这个工具网站给图片配置一下热区事件,然后导出后还是一张图片,往 oss 里一扔就完成更新了。  

    代码里集成这个 sdk 后可以直接响应图片上的点击事件,如果 sdk 不合适你的平台,那就集成一下 core 包,一个纯 js 包,ai 实现一下就完事了。集成起来非常简单。

    网址

    项目网址: https://clickable-img.dev.noteloom.app

    后续

    因为数据是公开的,所以我想上线个加密功能来着,支持配置一个密钥进行加密。不过看有没有人用吧,没人用就不做了。

    第 1 条附言  ·  9 小时 29 分钟前
    6 条回复    2026-04-19 00:07:07 +08:00
    rizon
        1
    rizon  
    OP
       10 小时 24 分钟前 via Android
    Leon6868
        2
    Leon6868  
       9 小时 22 分钟前
    将 <map> 和 <area> 功能通过 PNG 数据动态化,有种 htmx 的既视感
    flyqie
        3
    flyqie  
       9 小时 21 分钟前 via Android
    感谢开源,很有用,小项目确实用这种方式比较省事。

    楼主后续可以考虑做一下兜底吗,比如 editor 导出一个 json ,在非原图的时候(比如过了 cdn 没有调整尺寸但降低清晰度)自动接入 json ?
    rizon
        4
    rizon  
    OP
       9 小时 5 分钟前 via Android
    @Leon6868 嗯,有点类似意思。
    这个项目一是有一个前端页面方便直接可视化的配置热点区域,
    二是直接集成到图片里,项目开发里更快更简单。
    rizon
        5
    rizon  
    OP
       9 小时 5 分钟前 via Android
    @flyqie 好的,后面加上 json 数据导出
    rizon
        6
    rizon  
    OP
       8 小时 59 分钟前 via Android
    @flyqie 另外就是有些 cdn 是可以选择保留 metadata 的。
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   2429 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 94ms · UTC 01:06 · PVG 09:06 · LAX 18:06 · JFK 21:06
    ♥ Do have faith in what you're doing.