当前位置：首页 > JavaScript

js实现图片的放大缩小

2026-04-04 08:05:26JavaScript

使用 CSS transform 实现缩放

通过修改 CSS 的 transform: scale() 属性实现图片缩放效果。监听鼠标滚轮事件（wheel），动态调整 scale 值。

const img = document.querySelector('img');
let scale = 1;

img.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01; // 调整缩放速度
  scale = Math.min(Math.max(0.1, scale), 4); // 限制缩放范围
  img.style.transform = `scale(${scale})`;
});

使用 Canvas 动态绘制缩放

通过 Canvas 的 drawImage 方法结合缩放参数，实现更灵活的图片控制。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
let scale = 1;

img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
};

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  scale = Math.min(Math.max(0.1, scale), 4);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
});

结合拖拽与缩放

在缩放基础上添加拖拽功能，通过 mousedown、mousemove 和 mouseup 事件实现图片平移。

const img = document.querySelector('img');
let scale = 1;
let isDragging = false;
let startX, startY, translateX = 0, translateY = 0;

img.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - translateX;
  startY = e.clientY - translateY;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  translateX = e.clientX - startX;
  translateY = e.clientY - startY;
  img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

img.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  scale = Math.min(Math.max(0.1, scale), 4);
  img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
});

使用第三方库（如 Hammer.js）

引入 Hammer.js 处理手势操作，支持捏合缩放和拖拽。

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script>
  const img = document.querySelector('img');
  const hammer = new Hammer(img);
  let scale = 1;

  hammer.get('pinch').set({ enable: true });
  hammer.on('pinch', (e) => {
    scale = e.scale;
    img.style.transform = `scale(${scale})`;
  });
</script>

响应式缩放限制

确保缩放后图片不会超出容器边界，通过计算边界值动态调整 translate。

js实现图片的放大缩小

function checkBounds() {
  const maxX = (img.width * scale - img.parentElement.width) / 2;
  const maxY = (img.height * scale - img.parentElement.height) / 2;
  translateX = Math.min(Math.max(translateX, -maxX), maxX);
  translateY = Math.min(Math.max(translateY, -maxY), maxY);
  img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
}