怎么获取图片热点坐标

在网页开发、活动页制作、后台配置系统、在线标注工具、地图交互、产品详情页跳转等场景中，我们经常会遇到一个需求：在一张图片上的某个区域添加可点击、可交互的“热点”。例如，用户点击海报上的按钮跳转到报名页面，点击商品图中的某个商品进入详情页，点击建筑平面图上的房间查看信息等。

要实现这些功能，首先需要解决一个基础问题：怎么获取图片热点坐标？
本文将从概念、常见坐标类型、手动获取方法、浏览器获取方法、代码获取方法、响应式适配方案以及实际注意事项等方面，系统讲解图片热点坐标的获取方式。

一、什么是图片热点坐标

所谓“图片热点”，可以理解为图片上的一个可交互区域。这个区域可以是：

• 一个点
• 一个矩形
• 一个圆形
• 一个多边形
• 一个不规则区域

而“热点坐标”，就是用于描述该区域在图片中位置的数据。

例如，一张图片宽度为 1000px，高度为 600px。如果我们想让图片中左上角某个按钮可以点击，按钮区域大概是：

左上角坐标：x = 100, y = 200
右下角坐标：x = 300, y = 260

那么这个矩形热点区域就可以表示为：

100,200,300,260

在网页中，如果使用 HTML 的 和 标签，矩形热点通常写成：

其中：

• shape="rect" 表示矩形区域；
• coords="100,200,300,260" 表示热点坐标；
• href 表示点击区域后的跳转地址。

二、图片热点坐标的常见类型

在获取图片热点坐标之前，需要先明确你要获取哪一种热点区域。不同形状的热点，坐标表达方式不同。

1. 矩形热点坐标

矩形是最常见的热点区域，适合按钮、商品卡片、导航入口等规则区域。

矩形热点坐标格式通常为：

x1,y1,x2,y2

含义是：

• x1,y1：矩形左上角坐标；
• x2,y2：矩形右下角坐标。

例如：

表示从图片上的 (100,200) 到 (300,260) 之间的矩形区域都可以点击。

2. 圆形热点坐标

圆形热点适合圆形按钮、头像、图标、地图上的点位等。

圆形热点坐标格式为：

x,y,r

含义是：

• x,y：圆心坐标；
• r：半径。

例如：

表示以 (400,300) 为圆心、半径为 50px 的圆形区域是热点。

3. 多边形热点坐标

多边形热点适合不规则图形，例如地图区域、楼层区域、产品轮廓、人物身体区域等。

多边形热点坐标格式为：

x1,y1,x2,y2,x3,y3,...

每两个数字表示一个点，多个点依次连接形成多边形。

例如：

表示由四个点组成的多边形热点区域。

三、图片坐标系的基本规则

获取图片热点坐标时，必须理解图片坐标系，否则容易出现坐标错位。

在网页和大多数图像处理软件中，图片坐标系通常遵循以下规则：

图片左上角为坐标原点：0,0
横向向右为 x 轴正方向
纵向向下为 y 轴正方向

也就是说：

• 图片最左上角坐标是 (0,0)；
• 图片右上角坐标大约是 (图片宽度,0)；
• 图片左下角坐标大约是 (0,图片高度)；
• 图片右下角坐标大约是 (图片宽度,图片高度)。

假设图片尺寸是 800 × 500，那么：

左上角：0,0
右上角：800,0
左下角：0,500
右下角：800,500

需要注意的是，热点坐标通常是相对于图片自身原始尺寸或当前显示尺寸而言的。实际开发中，这一点非常重要，因为图片如果被 CSS 缩放了，坐标可能会发生偏差。

四、方法一：使用图片编辑软件获取坐标

最直观的方法是借助图片编辑软件获取坐标，例如：

• Photoshop
• Figma
• Sketch
• Adobe XD
• 蓝湖
• Pixso
• 即时设计
• GIMP
• 画图工具
• 在线图片标注工具

这种方式适合设计稿已经存在，或者需要精确测量热点区域的情况。

1. 使用 Photoshop 获取热点坐标

在 Photoshop 中获取坐标的方法如下：

1. 打开图片；
2. 选择“矩形选框工具”或“移动工具”；
3. 将鼠标移动到目标区域；
4. 查看信息面板中的 X、Y 坐标；
5. 如果是矩形区域，分别记录左上角和右下角坐标；
6. 如果是多边形区域，依次记录每个顶点坐标。

如果信息面板没有显示，可以通过菜单打开：

窗口 > 信息

在信息面板中，一般可以看到鼠标所在位置的坐标值。

例如，需要获取一个按钮的矩形区域：

左上角：120,380
右下角：420,460

那么 HTML 热点坐标就是：

2. 使用 Figma 获取热点坐标

如果图片或设计稿在 Figma 中，可以通过以下方式获取坐标：

1. 选中目标元素；
2. 在右侧属性面板中查看 X、Y、W、H；
3. X 和 Y 是元素左上角坐标；
4. W 是宽度，H 是高度；
5. 右下角坐标可以计算得到：

x2 = x + w
y2 = y + h

例如：

X = 100
Y = 200
W = 240
H = 80

那么：

左上角：100,200
右下角：340,280

对应热点坐标为：

100,200,340,280

Figma 的优势在于它可以直接读取设计稿中元素的位置，适合前端根据设计稿制作热点区域。

3. 使用系统画图工具获取坐标

如果没有专业软件，也可以使用简单的画图工具。

以 Windows 画图为例：

1. 打开图片；
2. 鼠标移动到目标位置；
3. 窗口底部通常会显示当前鼠标坐标；
4. 记录需要的点位；
5. 对矩形区域记录两个点，对多边形记录多个点。

这种方法简单，但不适合复杂区域或大量热点，因为手动记录效率较低。

五、方法二：使用浏览器和 JavaScript 获取坐标

如果图片已经放在网页中，可以通过 JavaScript 获取用户点击位置，然后计算出相对于图片的坐标。

这是开发中非常常用的方法，尤其适合做一个“点击图片生成坐标”的小工具。

1. 获取点击点坐标

下面是一个基础示例：

这里的关键是：

const rect = img.getBoundingClientRect();

它可以获取图片在浏览器视口中的位置和尺寸。

然后：

const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

即可得到点击点相对于图片左上角的位置。

2. 获取原始图片坐标

上面的代码获取的是图片当前显示尺寸下的坐标。如果图片在页面中被缩放了，那么这个坐标不一定等于原图坐标。

例如：

• 原图尺寸：1000 × 600
• 页面显示尺寸：500 × 300

用户点击显示图片上的 (250,150)，对应原图坐标其实是：

x = 250 × 1000 / 500 = 500
y = 150 × 600 / 300 = 300

因此，如果需要得到原始图片坐标，需要进行比例换算：

其中：

img.naturalWidth
img.naturalHeight

表示图片的原始宽度和高度。

这种方式非常实用，尤其是在响应式页面中，图片可能会根据屏幕大小自动缩放。

六、方法三：制作一个简单的图片热点坐标获取工具

如果你经常需要获取热点坐标，可以写一个简单的网页工具。点击图片时记录坐标，连续点击多个点后生成坐标字符串。

下面是一个基础版本，适合获取多边形坐标。

  
  
  



  
图片热点坐标获取工具

  
点击图片上的位置，程序会自动记录原图坐标。

  

  

    坐标结果：
    
  

  清空坐标

  

使用方法：

1. 把 demo.jpg 替换成你的图片路径；
2. 在浏览器中打开页面；
3. 依次点击热点区域的顶点；
4. 页面会自动生成类似下面的坐标：

120,80,260,100,300,240,150,280

然后可以直接用于：

七、矩形热点坐标怎么快速获取

矩形热点最常见。如果你不想手动记录左上角和右下角，可以写一个“点击两次生成矩形坐标”的工具。

逻辑很简单：

• 第一次点击记录左上角；
• 第二次点击记录右下角；
• 自动生成 x1,y1,x2,y2。

示例代码如下：

矩形坐标：

这样每两次点击就可以得到一个矩形热点坐标。

八、响应式图片中的热点坐标处理

实际开发中，很多图片不是固定尺寸，而是响应式的，例如：

img {
  width: 100%;
  height: auto;
}

这时如果直接使用 HTML 的原始坐标，可能会遇到问题：图片缩放了，但 的坐标仍然按照原图尺寸计算，导致点击区域错位。

因此，需要处理热点坐标的缩放问题。

1. 方案一：使用原图坐标并动态缩放

如果你使用 和 ，可以在页面加载和窗口变化时，根据图片实际显示比例重新计算 coords。

基本思路：

1. 保存原始坐标；
2. 获取图片当前显示宽高；
3. 计算缩放比例；
4. 更新每个 的 coords。

示例：

这种方案适合继续使用传统 HTML image map 的项目。

2. 方案二：使用百分比坐标

另一种更灵活的方法是将坐标转换成百分比。

例如原图尺寸为 1000 × 600，某个点坐标为：

x = 250
y = 300

转换为百分比：

xPercent = 250 / 1000 = 25%
yPercent = 300 / 600 = 50%

这样无论图片如何缩放，都可以根据百分比还原位置。

如果是矩形热点：

x = 100
y = 200
w = 300
h = 80

可以写成 CSS：

.hotspot {
  position: absolute;
  left: 10%;
  top: 33.33%;
  width: 30%;
  height: 13.33%;
}

实现结构如下：

.image-wrapper {
  position: relative;
  width: 100%;
}

.image-wrapper img {
  display: block;
  width: 100%;
}

.hotspot {
  position: absolute;
  left: 10%;
  top: 33.33%;
  width: 30%;
  height: 13.33%;
  display: block;
}

这种方式在移动端活动页中非常常见，优点是：

• 易于响应式适配；
• 可以使用 CSS 控制样式；
• 可以绑定更多交互事件；
• 不依赖 标签；
• 可维护性更好。

九、如何计算百分比热点坐标

假设图片原始尺寸是：

宽度：1000
高度：600

矩形热点原始坐标为：

x1 = 100
y1 = 200
x2 = 400
y2 = 300

那么：

left = x1 / 图片宽度 × 100 = 100 / 1000 × 100 = 10%
top = y1 / 图片高度 × 100 = 200 / 600 × 100 = 33.333%
width = (x2 - x1) / 图片宽度 × 100 = 300 / 1000 × 100 = 30%
height = (y2 - y1) / 图片高度 × 100 = 100 / 600 × 100 = 16.667%

最终 CSS 为：

.hotspot {
  left: 10%;
  top: 33.333%;
  width: 30%;
  height: 16.667%;
}

如果使用 JavaScript 自动转换，可以这样写：

function rectToPercent(x1, y1, x2, y2, imgWidth, imgHeight) {
  return {
    left: (x1 / imgWidth * 100).toFixed(3) + '%',
    top: (y1 / imgHeight * 100).toFixed(3) + '%',
    width: ((x2 - x1) / imgWidth * 100).toFixed(3) + '%',
    height: ((y2 - y1) / imgHeight * 100).toFixed(3) + '%'
  };
}

console.log(rectToPercent(100, 200, 400, 300, 1000, 600));

输出结果大致为：

{
  left: "10.000%",
  top: "33.333%",
  width: "30.000%",
  height: "16.667%"
}

十、获取热点坐标时常见问题

1. 图片显示尺寸和原图尺寸不一致

这是最常见的问题。

如果你在浏览器中看到的图片被缩放了，而你记录的是显示尺寸坐标，那么应用到原图坐标时就会错位。

解决方法：

• 使用 naturalWidth 和 naturalHeight 换算原图坐标；
• 或者统一使用百分比坐标；
• 或者保证图片显示尺寸与原图尺寸完全一致。

2. 图片有边框、内边距或 CSS 变形

如果图片外层有 padding、border，或者使用了 CSS transform: scale()，计算坐标时可能会受到影响。

建议：

• 使用 getBoundingClientRect() 获取真实显示区域；
• 尽量让热点层和图片放在同一个相对定位容器中；
• 避免在图片本身上添加复杂 transform；
• 如果必须 transform，要额外考虑变换矩阵。

3. 页面滚动导致坐标不准

如果直接使用 pageX、pageY 或 offsetX、offsetY，在某些布局中可能出现偏差。

通常推荐使用：

event.clientX - rect.left
event.clientY - rect.top

这种方式相对稳定，因为 clientX/clientY 和 getBoundingClientRect() 都是基于视口计算的。

4. 多边形坐标顺序错误

多边形热点需要按照边界顺序依次记录坐标，例如顺时针或逆时针。如果点的顺序混乱，浏览器可能无法正确识别区域。

建议：

• 从某个顶点开始；
• 按顺时针或逆时针方向依次点击；
• 不要交叉连线；
• 最后一个点不需要重复第一个点。

5. 小数坐标如何处理

在浏览器中，getBoundingClientRect() 返回的尺寸可能包含小数。因此计算出来的坐标也可能是小数。

一般情况下可以使用：

Math.round()

进行四舍五入。

如果要求更精确，也可以保留一到三位小数，尤其是百分比坐标：

value.toFixed(3)

十一、实际项目中推荐的做法

如果只是简单网页，并且图片尺寸固定，可以使用传统方式：

如果页面需要适配手机、平板、PC 等多种屏幕，建议使用百分比热点：

.image-wrapper {
  position: relative;
}

.image-wrapper img {
  display: block;
  width: 100%;
}

.hotspot {
  position: absolute;
  display: block;
}

.hotspot-1 {
  left: 10%;
  top: 30%;
  width: 20%;
  height: 8%;
}

这种方式不仅更适合响应式布局，也更方便添加动画、统计埋点、弹窗、悬浮提示等交互效果。

十二、总结

获取图片热点坐标并不复杂，关键是明确坐标来源和使用场景。

常见方法包括：

1. 使用图片编辑软件获取坐标
   适合精确测量，如 Photoshop、Figma、Pixso 等。

2. 使用浏览器 JavaScript 获取坐标
   适合开发坐标采集工具，点击图片即可生成坐标。

3. 使用 HTML image map 实现热点
   适合传统固定尺寸图片热点。

4. 使用百分比坐标和绝对定位实现热点
   适合响应式页面和移动端活动页。

在实际开发中，最需要注意的是：图片原始尺寸和显示尺寸可能不同。如果忽略缩放比例，热点位置很容易发生偏移。因此，推荐优先使用原图坐标换算，或者直接采用百分比坐标方案。

一句话概括：
先确定图片坐标系，再记录目标区域坐标，最后根据图片显示方式选择固定坐标、缩放坐标或百分比坐标。这样就可以准确、稳定地获取并使用图片热点坐标。