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

Home Sign Up Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

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

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

8 replies • 2026-05-18 12:00:09 +08:00

1

yanx1n

13h 58m ago

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

2

mxm145

3h 22m ago

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

3

waelun

3h 1m ago

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

4

andyskaura

2h 25m ago

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

5

webnoob

2h 18m ago

Uncaught Error: Invalid PNG: IEND chunk not found

6

wonderfulcxm

1h 33m ago

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

7

TimPeake

36 mins ago

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

8

koor

31 mins ago

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

About · Help · Advertise · Blog · API · FAQ · Solana · 3820 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 46ms · UTC 04:31 · PVG 12:31 · LAX 21:31 · JFK 00:31
♥ Do have faith in what you're doing.