如何通过图片链接获取图片尺寸并实现页面图片预览功能？

嘿，我完全懂你要做的这个图片预览器需求，核心痛点就是怎么通过图片链接拿到它的真实尺寸对吧？其实这个操作在JS里挺简单的，咱们一步步来搞定。

核心思路：用隐藏的Image对象获取真实尺寸 #

你不需要把图片显示出来就能拿到它的原始尺寸——创建一个内存中的Image对象，设置它的src为目标图片链接，等它加载完成后，直接读取naturalWidth和naturalHeight属性就行（这两个属性是图片的真实尺寸，不会受CSS缩放影响）。

基础代码示例 #

function getImageRealSize(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 处理跨域图片（如果你的图片来自其他域名，必须设置这个，同时确保服务器开了CORS）
    img.crossOrigin = 'anonymous';
    
    img.onload = () => {
      resolve({
        width: img.naturalWidth,
        height: img.naturalHeight
      });
    };
    
    img.onerror = () => {
      reject(new Error(`无法加载图片：${imageUrl}`));
    };
    
    img.src = imageUrl;
  });
}

// 使用示例
getImageRealSize('你的大图链接')
  .then(size => {
    console.log('图片真实尺寸：', size.width, 'x', size.height);
  })
  .catch(err => {
    console.error(err);
  });

结合你的预览器需求的完整实现 #

下面是一个完整的代码示例，包含缩略图点击/悬停触发预览、自动计算预览图位置和尺寸（不超过窗口可视区域）的功能：

HTML结构 #

<!-- 缩略图容器 -->
<div class="thumbnail-container">
  <img class="thumbnail" src="缩略图链接1" data-fullsrc="大图链接1" alt="缩略图1">
  <img class="thumbnail" src="缩略图链接2" data-fullsrc="大图链接2" alt="缩略图2">
  <!-- 可以添加更多缩略图 -->
</div>

<!-- 预览大图的容器（初始隐藏） -->
<div class="preview-container" id="previewContainer">
  <img id="previewImage" alt="预览图">
</div>

CSS样式 #

.thumbnail-container {
  display: flex;
  gap: 12px;
  padding: 20px;
  flex-wrap: wrap;
}

.thumbnail {
  width: 120px;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  transition: border-color 0.2s;
}

.thumbnail:hover {
  border-color: #409eff;
}

.preview-container {
  position: fixed;
  z-index: 9999;
  background: rgba(0,0,0,0.05);
  padding: 6px;
  border-radius: 4px;
  display: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

#previewImage {
  display: block;
  border-radius: 2px;
}

JavaScript逻辑 #

const previewContainer = document.getElementById('previewContainer');
const previewImage = document.getElementById('previewImage');
const thumbnails = document.querySelectorAll('.thumbnail');
// 缓存已加载的图片尺寸，避免重复请求
const sizeCache = {};

// 计算预览图的合适尺寸（不超过窗口可视区域，留边距）
function calculatePreviewSize(imgWidth, imgHeight) {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  const maxWidth = windowWidth - 50;
  const maxHeight = windowHeight - 50;

  // 计算缩放比例，取最小的那个，保证图片完整显示
  const scale = Math.min(maxWidth / imgWidth, maxHeight / imgHeight, 1);
  
  return {
    width: Math.floor(imgWidth * scale),
    height: Math.floor(imgHeight * scale)
  };
}

// 设置预览容器的位置（跟随鼠标，避免盖住指针）
function setPreviewPosition(e) {
  let posX = e.clientX + 15;
  let posY = e.clientY + 15;

  // 防止预览容器超出窗口右侧
  if (posX + previewContainer.offsetWidth > window.innerWidth) {
    posX = e.clientX - previewContainer.offsetWidth - 15;
  }
  // 防止预览容器超出窗口底部
  if (posY + previewContainer.offsetHeight > window.innerHeight) {
    posY = e.clientY - previewContainer.offsetHeight - 15;
  }
  
  previewContainer.style.left = `${posX}px`;
  previewContainer.style.top = `${posY}px`;
}

// 处理缩略图的交互事件
thumbnails.forEach(thumb => {
  // 悬停显示预览
  thumb.addEventListener('mouseenter', async (e) => {
    const fullImageUrl = thumb.dataset.fullsrc;
    try {
      // 优先从缓存取尺寸
      let size = sizeCache[fullImageUrl];
      if (!size) {
        size = await getImageRealSize(fullImageUrl);
        sizeCache[fullImageUrl] = size;
      }
      
      // 计算预览图显示尺寸
      const previewSize = calculatePreviewSize(size.width, size.height);
      
      // 更新预览图属性
      previewImage.src = fullImageUrl;
      previewImage.style.width = `${previewSize.width}px`;
      previewImage.style.height = `${previewSize.height}px`;
      
      // 定位并显示预览容器
      setPreviewPosition(e);
      previewContainer.style.display = 'block';
    } catch (err) {
      console.error(err);
    }
  });

  // 鼠标离开隐藏预览
  thumb.addEventListener('mouseleave', () => {
    previewContainer.style.display = 'none';
    previewImage.src = ''; // 清空图片，避免下次加载闪烁
  });

  // 点击事件（可选，比如需要点击固定预览）
  thumb.addEventListener('click', async (e) => {
    e.preventDefault();
    const fullImageUrl = thumb.dataset.fullsrc;
    try {
      let size = sizeCache[fullImageUrl] || await getImageRealSize(fullImageUrl);
      const previewSize = calculatePreviewSize(size.width, size.height);
      
      previewImage.src = fullImageUrl;
      previewImage.style.width = `${previewSize.width}px`;
      previewImage.style.height = `${previewSize.height}px`;
      
      setPreviewPosition(e);
      previewContainer.style.display = 'block';
    } catch (err) {
      console.error(err);
    }
  });
});

// 鼠标在预览容器上移动时，更新位置
previewContainer.addEventListener('mousemove', setPreviewPosition);

关键细节说明 #

• 跨域处理：如果图片来自其他域名，必须确保目标服务器设置了CORS响应头，同时在Image对象上添加crossOrigin: 'anonymous'，否则会无法获取到真实尺寸。
• 性能优化：用sizeCache对象缓存已加载的图片尺寸，避免重复加载同一图片，提升交互流畅度。
• 窗口适配：代码里已经处理了预览容器超出窗口的情况，如果你需要支持窗口 resize 时重新计算尺寸，可以监听window.resize事件。

内容的提问来源于stack exchange，提问作者Yılmaz Durmaz