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

[rizon]

https://clickable-img.dev.noteloom.app/

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

东西很简单，原理也很简单。不过确实能在某些特定场景下省下很多事情。

[yanx1n]

可以的，不过创建第一个热区的时候拖拽很卡，后面没问题

[mxm145]

非常好用，要是能支持不规则区域就完美了

[waelun]

很有创意 问了好几个 ai 都是通过定位 div 实现

[andyskaura]

是放在元数据的吗？如果能在编辑器中集成压缩功能就更好了。

[webnoob]

Uncaught Error: Invalid PNG: IEND chunk not found

[wonderfulcxm]

其他上古的 Dreamweaver 就有这个功能，甚至支持不规则区域。

[TimPeake]

类似 html map 标签 ？
https://www.runoob.com/tags/tag-map.html

[koor]

这种的无障碍要怎么做呢？

[rizon]

@TimPeake 这种方案也是也是可以，只不过不是很通用，比如微信小程序里

[rizon]

@webnoob 现在只支持 PNG 图，虽然 JPG 也可以去适配，不过暂时没做。png 和 jpg 的 meta 格式不一样

[rizon]

@andyskaura 嗯，放在元数据里的。压缩图片然后写 meta 是吗，这倒是能方便不少。 看需求吧，如果用的人多，就继续迭代。我本来还打算加上加密功能，毕竟元数据是公开的。

[rizon]

@mxm145 嗯嗯，后面看看找时间加一下。

[rizon]

@yanx1n 好的，优化下

[rizon]

@koor 你可以用我提供的 core 包，然后自己去设置无障碍标识属性就好。core 包就是只有最核心的 util 的基础包，页面上如何渲染和处理热区都是自己发挥就好。

[nzbin]

@wonderfulcxm #6 我印象中 Dreamweaver 是通过 map 标签实现的，确实功能更强

[wonderfulcxm]

@nzbin 应该是，很少人知道这个功能，用过 DW 的都暴露年龄了。😂

[webnoob]

@rizon 好的好的 谢谢