当前位置：首页 > JavaScript

js实现图片缩放

2026-04-04 05:07:11JavaScript

实现图片缩放的 JavaScript 方法

使用 CSS `transform` 属性缩放图片

通过修改 CSS 的 transform 属性实现缩放效果，性能较好且不影响布局。

const img = document.getElementById('targetImage');
img.style.transform = 'scale(1.5)'; // 放大1.5倍
img.style.transformOrigin = 'center center'; // 设置缩放基准点

动态修改 `width`/`height` 属性

直接调整图片的宽高实现缩放，会改变元素实际占位空间。

js实现图片缩放

const img = document.querySelector('.resizable-image');
const currentWidth = img.clientWidth;
img.style.width = (currentWidth * 1.2) + 'px'; // 宽度放大20%
// 高度可设置为auto保持比例

使用 Canvas 实现高质量缩放

通过 Canvas 进行图像重采样，适合需要高质量缩放的场景。

js实现图片缩放

function scaleImage(src, scale, outputId) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.onload = function() {
    canvas.width = img.width * scale;
    canvas.height = img.height * scale;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    document.getElementById(outputId).appendChild(canvas);
  };
  img.src = src;
}

添加交互控制（滑块示例）

结合 HTML 输入控件实现交互式缩放。

<input type="range" id="zoomSlider" min="0.1" max="3" step="0.1" value="1">
<img id="zoomableImg" src="image.jpg">

document.getElementById('zoomSlider').addEventListener('input', (e) => {
  document.getElementById('zoomableImg').style.transform = `scale(${e.target.value})`;
});

响应式缩放实现

根据容器尺寸自动调整图片大小，保持比例。

function responsiveScale(img, container) {
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  const imgRatio = img.naturalWidth / img.naturalHeight;
  const containerRatio = containerWidth / containerHeight;

  if (containerRatio > imgRatio) {
    img.style.height = '100%';
    img.style.width = 'auto';
  } else {
    img.style.width = '100%';
    img.style.height = 'auto';
  }
}