用浏览器原生ismap可快速获取图片单点坐标，需设固定width/height、外层包裹href标签，点击后url显示?x,y；导出coords须匹配naturalwidth/naturalheight，poly需偶数坐标且清理换行，circle半径须为正整数，ps/figma量坐标需100%缩放并以左上角为原点，响应式下coords失效因绑定原始像素而非渲染尺寸。
用浏览器原生 ismap 快速抓取单点坐标
不需要装插件或开设计软件，ismap 属性就能在点击图片时直接把坐标暴露在 URL 地址栏里。前提是图片必须有明确的 width 和 height（不能只靠 CSS 控制尺寸），否则坐标会失真。
实操建议：
- 给
<img>加上ismap属性和固定宽高，例如：<img src="plan.png" style="max-width:90%" style="max-width:90%" ismap> - 确保外层包裹一个带
href的标签（如@#@#@#@#@#@#@#@#@#@0），否则点击后可能跳转或报错 - 鼠标点击任意位置，地址栏末尾会出现类似
?137,42的坐标——这就是以图片左上角为原点的(x,y)像素值 - 多个点可反复点击记录，适合矩形、圆形中心点或 poly 起始点的粗略定位
用在线工具导出 coords 时必须确认原始尺寸
像 image-map.net 这类工具画完区域后会生成 <area> 代码，但它们默认按你上传图片的**实际像素尺寸**输出 coords。如果你上传的是缩放过的设计稿（比如从 Sketch 导出的 2x 图但标称尺寸是 375×667），那导出的坐标就完全不可用。
关键检查点：
- 打开开发者工具 → 选中图片 → 查看
naturalWidth/naturalHeight属性，这才是浏览器认定的“原始尺寸” - 导出前，在工具里手动把画布尺寸设为该 natural 尺寸，再重新描点
- poly 类型导出的
coords常带换行或多余空格，复制后务必清理成一行，例如："10,20,30,40,50,60"，不能是"10,20,\n30,40,\n50,60" - circle 的半径必须是正整数，
coords="100,100,12.5"在 Safari 中会被静默忽略
Photoshop 或 Figma 里量坐标要关掉缩放干扰
设计稿里看到的「居中坐标」或「相对位置百分比」不能直接填进 coords。必须还原到图片左上角为 (0,0) 的绝对像素系，且数值单位只能是整数像素。
操作要点：
- 在 Photoshop 中：打开「信息」面板（
Window → Info），用选区工具拖动时看左上角显示的X和Y值；确保视图缩放为 100%（Ctrl+1），否则读数不准 - 在 Figma 中：右键图层 →
Copy as PNG后另存为完整尺寸 PNG，再用「测量工具」（Ruler）拉线，注意顶部状态栏显示的是相对于画布左上角的坐标，不是相对于 Frame - rect 类型必须满足
x1 且 <code>y1 ，如果量反了（比如从右下往左上拖），要手动交换顺序 - poly 至少需要 3 对坐标（6 个数字），总数必须是偶数；首尾点不自动闭合，稳妥做法是重复写一次起点，如
"10,10,50,10,50,50,10,10"
响应式页面里 coords 错位的根本原因和临时验证法
只要图片用了 max-width: 100%、width: 100% 或任何 CSS 缩放，coords 就必然失效——这不是 bug，是 HTML 规范定义的行为：坐标永远绑定原始像素，不随渲染尺寸变化。
快速验证是否已错位：
- 给图片加临时样式：
border: 2px solid red，再用浏览器「截图选区」工具（DevTools → ⚡️ > Capture area screenshot）框出你认为的热区范围 - 对比截图选区的像素值和你写的
coords：比如截图显示选区是32×24px，而你填的是coords="0,0,100,100"，说明已严重缩放失准 - 若必须支持响应式，不要硬调
coords，而是改用<svg></svg>或 JS 库如rwd-image-maps动态重算比例 - 更隐蔽的问题：高 DPR 屏幕（如 MacBook Retina）下，
naturalWidth是物理像素，但渲染宽度是逻辑像素，缩放比 =naturalWidth / clientWidth，这个比值必须参与重算
真正难的不是怎么取坐标，而是怎么确认当前页面里这张图的 naturalWidth、CSS 渲染宽度、设备像素比三者关系是否稳定——一旦其中任一值动态变化（比如图片懒加载完成前后），coords 就可能突然偏移。别依赖肉眼对齐，每次改完都用截图选区工具过一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
