当前位置：首页 > JavaScript

js实现图片缩放

2026-01-30 13:26:46JavaScript

使用 CSS transform 实现缩放

通过修改 CSS 的 transform 属性实现缩放效果，这种方法性能较好，不会引起页面重排。

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

function zoomIn() {
  scale += 0.1;
  img.style.transform = `scale(${scale})`;
}

function zoomOut() {
  if(scale > 0.1) {
    scale -= 0.1;
    img.style.transform = `scale(${scale})`;
  }
}

修改 width/height 属性

直接修改图片的宽度和高度属性实现缩放，这种方法会改变元素的实际尺寸。

js实现图片缩放

const img = document.getElementById('myImage');
let width = img.width;

function zoomIn() {
  width += 50;
  img.style.width = `${width}px`;
}

function zoomOut() {
  if(width > 50) {
    width -= 50;
    img.style.width = `${width}px`;
  }
}

使用 canvas 实现高质量缩放

当需要更精确控制缩放质量时，可以使用 canvas 的 drawImage 方法。

js实现图片缩放

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

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

function zoom(factor) {
  canvas.width = img.width * factor;
  canvas.height = img.height * factor;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

响应鼠标滚轮缩放

监听鼠标滚轮事件实现交互式缩放。

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

img.addEventListener('wheel', function(e) {
  e.preventDefault();

  if(e.deltaY < 0) {
    scale += 0.1;
  } else {
    scale = Math.max(0.1, scale - 0.1);
  }

  img.style.transform = `scale(${scale})`;
});

使用第三方库实现高级缩放

考虑使用成熟的第三方库如 medium-zoom 或 panzoom 实现更复杂的缩放功能。

// 使用 medium-zoom
import mediumZoom from 'medium-zoom';

const zoom = mediumZoom('#myImage', {
  margin: 24,
  background: '#000',
  scrollOffset: 40
});

// 使用 panzoom
import panzoom from 'panzoom';

const element = document.getElementById('myImage');
panzoom(element, {
  maxZoom: 5,
  minZoom: 0.5
});