HTML区域映射读取naturalWidth教程-html教程-PHP中文网

naturalWidth和naturalHeight不能用于元素，因其无图像数据；需通过usemap定位关联，再读取其naturalWidth/naturalHeight，注意图片加载状态与跨域限制。

html区域映射读取naturalwidth教程

naturalWidth 和 naturalHeight 不能直接用于元素——区域映射（image map）本身不存储原始图像尺寸，它依赖的才有这些属性。想获取映射区域的坐标基准，必须先拿到对应图片的真实像素宽高。

area 标签没有 naturalWidth 属性

是纯语义标签，不承载图像数据，也没有 naturalWidth、naturalHeight 或任何尺寸属性。它的 coords 值（如 "10,20,50,80"）是相对于其关联的**原始像素坐标系**的，不是 CSS 渲染后的视口坐标。所以你真正要读的，是那个对应的图像对象。

如何通过 usemap 定位到原始图片并读取 naturalWidth

关键步骤是：找到所属的，再反查哪个引用了它。注意：usemap 值带 #，而不带。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

用 document.querySelector('area').closest('map') 拿到元素
读取它的 name 属性，拼成选择器 img[usemap="#${mapName}"]
确保该已加载完成，再访问 .naturalWidth，否则返回 0
如果图片是动态插入或尚未加载，必须监听 img.onload，不能跳过

常见错误：coords 坐标错位或缩放失真

当被 CSS 缩放（比如 width: 100%; height: auto）或设置了 width/height 属性时，area 的 coords 仍按原始像素解释——但浏览器渲染后坐标系已变，导致点击热点偏移。

正确做法：用 img.naturalWidth / img.offsetWidth 算出缩放比，再对 coords 做等比换算（仅当必须适配缩放图时）
更稳妥方案：避免用 area 做响应式热区；改用 SVG 或 Canvas + 事件坐标映射
不要在 img.onload 外直接读 naturalWidth，尤其在 SPA 中图片可能被懒加载或缓存未触发事件
IE9+ 支持 naturalWidth，但 IE8 及更早版本需降级为 new Image().onload 加载同源 URL 再取 .width

完整示例：从 area 出发安全获取原始图像尺寸

function getMappedImageNaturalSize(areaEl) {
  const map = areaEl.closest('map');
  if (!map) return null;

  const img = document.querySelector(`img[usemap="#${map.name}"]`);
  if (!img) return null;

  // 图片未加载完成时 naturalWidth 为 0
  if (img.naturalWidth > 0) {
    return { width: img.naturalWidth, height: img.naturalHeight };
  }

  return new Promise(resolve => {
    img.addEventListener('load', () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    }, { once: true });
  });
}

// 使用
const area = document.querySelector('area[data-id="logo"]');
getMappedImageNaturalSize(area).then(size => {
  console.log('原始尺寸:', size);
});

最易被忽略的一点：和必须在同一个文档上下文里；若图片来自 iframe 或跨域资源，naturalWidth 可能不可读，且 area 的交互行为本身也会受限。