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

[rizon]

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

背景

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

功能

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

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

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

网址

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

后续

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

[rizon]

https://i.imgur.com/a/P7MnuE1.png

[Leon6868]

将 <map> 和 <area> 功能通过 PNG 数据动态化，有种 htmx 的既视感

[flyqie]

感谢开源，很有用，小项目确实用这种方式比较省事。

楼主后续可以考虑做一下兜底吗，比如 editor 导出一个 json ，在非原图的时候(比如过了 cdn 没有调整尺寸但降低清晰度)自动接入 json ？

[rizon]

@Leon6868 嗯，有点类似意思。
这个项目一是有一个前端页面方便直接可视化的配置热点区域，
二是直接集成到图片里，项目开发里更快更简单。

[rizon]

@flyqie 好的，后面加上 json 数据导出

[rizon]

@flyqie 另外就是有些 cdn 是可以选择保留 metadata 的。