js放大镜的实现原理

放大镜的核心原理

放大镜效果通过监听鼠标在原始图片上的移动，动态计算放大区域并显示放大后的图像。核心在于坐标映射和图像裁剪。

监听鼠标位置

使用mousemove事件获取鼠标在原始图片上的坐标（offsetX, offsetY）。通过getBoundingClientRect()校正坐标，确保位置计算精确。

img.addEventListener('mousemove', (e) => {
  const rect = img.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
});

计算放大区域

根据鼠标坐标确定放大镜的显示范围。通常设置一个固定大小的放大镜框（如100px×100px），按比例（如2倍）计算对应的原图区域。

const zoomLevel = 2;
const magnifierSize = 100;
const zoomWidth = magnifierSize / zoomLevel;
const zoomHeight = magnifierSize / zoomLevel;

显示放大效果

通过CSS裁剪原图或使用Canvas绘制放大区域。动态调整background-position或绘制缩放后的图像片段。

// CSS背景方案
magnifier.style.backgroundImage = `url(${img.src})`;
magnifier.style.backgroundSize = `${img.width * zoomLevel}px ${img.height * zoomLevel}px`;
magnifier.style.backgroundPosition = `-${x * zoomLevel - magnifierSize/2}px -${y * zoomLevel - magnifierSize/2}px`;

// Canvas方案
ctx.drawImage(img, 
  x - zoomWidth/2, y - zoomHeight/2, zoomWidth, zoomHeight,
  0, 0, magnifierSize, magnifierSize
);

边界处理

确保放大镜不会超出原图范围。对计算出的坐标进行边界检查，强制限制在有效区域内。

const boundedX = Math.max(zoomWidth/2, Math.min(x, img.width - zoomWidth/2));
const boundedY = Math.max(zoomHeight/2, Math.min(y, img.height - zoomHeight/2));

性能优化

对高频的mousemove事件进行节流（throttle），避免过度渲染。使用requestAnimationFrame优化动画流畅度。

let lastTime = 0;
img.addEventListener('mousemove', (e) => {
  const now = Date.now();
  if (now - lastTime >= 16) { // ~60fps
    updateMagnifier(e);
    lastTime = now;
  }
});

完整实现示例

结合上述原理的简化代码框架：

function initMagnifier(img, magnifier) {
  const zoomLevel = 2;
  const size = 100;

  img.addEventListener('mousemove', (e) => {
    const rect = img.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 边界检查
    const boundX = Math.max(size/2/zoomLevel, Math.min(x, img.width - size/2/zoomLevel));
    const boundY = Math.max(size/2/zoomLevel, Math.min(y, img.height - size/2/zoomLevel));

    // 更新放大镜
    magnifier.style.display = 'block';
    magnifier.style.left = `${e.clientX - size/2}px`;
    magnifier.style.top = `${e.clientY - size/2}px`;
    magnifier.style.backgroundPosition = `-${boundX * zoomLevel - size/2}px -${boundY * zoomLevel - size/2}px`;
  });

  img.addEventListener('mouseleave', () => {
    magnifier.style.display = 'none';
  });
}