area坐标必须按原图naturalwidth/naturalheight手动量，不存在离线准确生成coords的通用工具；可靠方案仅三类：图像编辑软件、本地html页面（用offsetx/y+natural尺寸）、命令行工具如imagemagick。
area坐标必须按原图 naturalWidth/naturalHeight 手动量，没有“自动计算”工具
浏览器里根本不存在能离线、准确生成 coords 的通用工具——所有标榜“图像地图生成器”的网页工具，本质只是帮你把鼠标点的位置转成像素值，而这个像素值是否正确，完全取决于你当前看到的图是不是原始尺寸。一旦图片被 CSS 缩放、max-width 限制或 object-fit 裁剪，工具量出来的坐标就直接失效。
真正能离线用的，只有三类东西：
- 图像编辑软件（如 Photoshop、GIMP）：打开原始 PNG/JPG 文件，在标尺模式下手动读取左上角为 (0,0) 的像素坐标
- 本地运行的 HTML 页面（无网络依赖）：用
<img>原样加载原始图，加一段 JS 读取img.naturalWidth和img.naturalHeight，再监听click获取offsetX/offsetY，输出符合shape格式的coords字符串 - 命令行图像分析工具（如 ImageMagick）：用
identify -format "%wx%h" image.png确认原始尺寸，再配合设计稿标注换算（例如 @2x 图标注 200×100 → 实际填coords="100,50,..."）
用本地 HTML 页面手动生成 coords 的最小可行代码
新建一个 area-coords.html 文件，双击即可在浏览器中打开（无需服务器）：
@@##@@ <pre class="brush:php;toolbar:false;" id="output"><script> const img = document.getElementById('src'); img.addEventListener('load', () => { img.addEventListener('click', e => { const x = Math.round(e.offsetX); const y = Math.round(e.offsetY); // 示例：点击一次出 rect 的 coords（左上 + 右下） const coords = `${x-20},${y-20},${x+20},${y+20}`; document.getElementById('output').textContent = `coords="${coords}"`; }); }); </script>html>
注意：
- 必须把
your-image.png放在同一目录，且确保它是**原始分辨率文件**（不是 CSS 缩放后的截图） -
e.offsetX/e.offsetY只在图片未缩放、未加border/padding时等于真实像素坐标；如果页面有干扰样式，先临时清空style - 这段代码只适合快速打点矩形，画
poly需要记录多次点击并拼接成偶数个数字，不能直接复用
为什么 Figma / Sketch 导出的坐标常出错
设计稿工具导出的坐标默认基于画布或标注层，不是图像原始像素基准。常见翻车点：
- @2x 或 @3x 导出的 PNG，标注数值是视网膜屏逻辑像素，需除以设备像素比（如 2）才得真实
coords - 用了 “约束到容器” 或 “响应式缩放”，标注位置随画布尺寸变化，但
coords必须锁定在固定宽高比下 - 导出时勾选了“包含阴影/描边”，导致图像边缘多出透明像素，(0,0) 偏移
- 复制坐标时带了空格或中文逗号，如
"100, 200, 300,400"→ 浏览器只认"100,200,300,400"
最稳做法：把设计稿里的图片切出来，用系统看图工具打开，确认宽度/高度数值，再拿这个尺寸当标尺去量——别信任何中间环节的“自动识别”。
poly 形状的 coords 必须手动闭合首尾点
shape="poly" 不会自动连接最后一个顶点回第一个，浏览器也不会补全。如果你漏写起点或终点，或者顶点数为奇数，结果不可预测：
- 正确写法（三角形）：
coords="10,20,30,40,50,60,10,20"（7 对？不，是 4 个点，最后重复起点） - 错误写法：
coords="10,20,30,40,50,60"→ 只画两条线段，不是封闭区域 - 更隐蔽的错：
coords="10,20,30,40,50,60,10,20,"→ 末尾多逗号，部分浏览器直接忽略整个area
检查方法：把 coords 复制进在线 poly 绘图工具（如 https://www.image-map.net），看是否闭合成预期形状；不要靠肉眼数对数——用文本编辑器的列选择或正则 \d+,\d+ 匹配来验偶数性。
真正麻烦的不是怎么生成坐标，而是怎么让同一套 coords 在不同屏幕、不同缩放比下还能点准——<map></map> 没有响应式机制，这点必须提前接受。要么放弃缩放，要么换 SVG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
