应放弃，改用绝对定位透明元素模拟热点并同步缩放；canvas需用getboundingclientrect()动态换算坐标；移动端须监听visualviewport事件统一维护缩放比例。

用 transform: scale() 缩放整个区域，但需手动校准坐标

HTML 本身没有“可缩放映像区域”这个原生概念；所谓“映射区域”，通常指 <map></map> + <area> 定义的热点，或 Canvas 中通过坐标计算的交互区域。当容器被 CSS 缩放后，<area> 坐标不会自动适配——浏览器仍按原始像素值匹配鼠标位置，导致点击偏移。

解决思路是：不依赖 <map></map>，改用绝对定位的透明元素模拟热点，并随容器一起缩放。关键点：

• transform: scale() 只影响渲染，不改变 DOM 布局尺寸和事件坐标系，所以 <area> 坐标失效是必然的，不是 bug
• 若必须保留 <map></map>，需 JS 手动监听 wheel 或缩放事件，实时重写 <area> 的 coords 属性（例如原 coords="10,20,50,60" 在 scale(1.5) 下要改为 "15,30,75,90"）
• 更可靠的做法是放弃 <map></map>，用 position: absolute 的 <div> 覆盖在图片上，设置 <code>pointer-events: auto，并用 transform: scale() 同步缩放这些 div

  Canvas 中缩放映像区域必须重算坐标

  Canvas 是位图绘制环境，所有坐标都是逻辑像素。当你对 <canvas></canvas> 元素本身应用 transform: scale(1.2)，只是把画布“拉伸显示”，内部绘图坐标系不变，但鼠标事件的 clientX/clientY 仍是屏幕坐标，需手动反向映射。

  正确做法是：保持 canvas 元素本身无 transform，只缩放绘制内容，并用 getBoundingClientRect() 动态换算鼠标位置：

  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  const x = (e.clientX - rect.left) * scaleX;
  const y = (e.clientY - rect.top) * scaleY;
  // x/y 就是缩放后的真实绘图坐标
  

  常见错误：

  • 直接用 e.offsetX/e.offsetY —— 这些值在缩放后不可靠，尤其跨浏览器表现不一致
  • 对 canvas 设置 width/height 行内属性后再用 CSS 缩放 —— 导致分辨率失真，绘图模糊
  • 忘记在 resize 或缩放变化时重新计算 scaleX/scaleY，造成坐标漂移

  object-fit 和 background-size: cover 不影响映射区域

  这两个属性只控制图片如何填满容器，不改变容器本身的尺寸或坐标系统。如果你用 <img> + object-fit: cover 实现等比裁剪缩放，那它的 <map></map> 热点依然基于原始图片尺寸，且无法响应式适配——因为 <area> 的 coords 是固定像素值，没有相对单位。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  替代方案：

  • 改用 background-image + padding-bottom 技巧生成比例容器（如 padding-bottom: 56.25% 对应 16:9），再在内部放绝对定位的热点 <div>，其 <code>top/left 百分比值会随容器缩放自然生效
  • 完全放弃 <map></map>，用 JS 监听图片加载完成，读取 naturalWidth/naturalHeight，再按容器实际宽高比动态生成热点区域的相对坐标

  移动端双指缩放时，映射区域偏移最隐蔽的坑

  在 iOS Safari 或 Chrome 移动版中，启用 user-scalable=yes 后，用户双指缩放页面，整个视口被缩放（visualViewport.scale 变化），但 document.documentElement.clientWidth 等尺寸不变，导致所有基于 clientWidth 计算的映射坐标全部错位。

  必须监听 visualviewport 事件：

  if ('visualViewport' in window) {
    visualViewport.addEventListener('resize', () => {
      const scale = visualViewport.scale;
      // 所有映射坐标的计算都要乘以 1/scale 来归一化
    });
  }
  

  这个 API 在桌面端部分浏览器不支持，所以不能只靠它；真实项目里得同时监听 visualviewport、window.resize、以及自定义缩放控件的触发事件，三者统一维护一个全局 currentScale 变量，所有坐标换算都经过它。

  最易忽略的是：这个缩放不是 CSS transform，无法用 getComputedStyle 读取，只能靠 visualViewport.scale 或 document.body.style.zoom（已废弃）间接获取——而后者在现代浏览器里根本没用。