js实现图片缩放

使用 CSS transform 实现图片缩放

通过 CSS 的 transform: scale() 属性可以轻松实现图片的缩放效果。这种方法不会改变 DOM 元素的布局，仅影响视觉呈现。

const img = document.querySelector('img');
img.style.transform = 'scale(1.5)'; // 放大到150%
img.style.transition = 'transform 0.3s ease'; // 添加平滑过渡效果

通过修改 width/height 属性缩放

直接修改图片元素的宽高属性实现缩放，这种方法会改变元素的实际占用空间。

function scaleImage(element, scaleFactor) {
    const originalWidth = element.naturalWidth;
    const originalHeight = element.naturalHeight;
    element.width = originalWidth * scaleFactor;
    element.height = originalHeight * scaleFactor;
}

使用 Canvas 实现高质量缩放

Canvas 提供了更精细的图像处理能力，适合需要高质量缩放的场景。

function scaleWithCanvas(imgElement, scale) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imgElement.width * scale;
    canvas.height = imgElement.height * scale;
    ctx.drawImage(imgElement, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL('image/png');
}

实现鼠标滚轮缩放

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

const img = document.getElementById('zoomable-image');
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})`;
});

响应式图片缩放

结合窗口大小变化实现响应式缩放。

window.addEventListener('resize', () => {
    const img = document.getElementById('responsive-image');
    const containerWidth = img.parentElement.clientWidth;
    const scale = containerWidth / img.naturalWidth;
    img.style.width = `${img.naturalWidth * scale}px`;
    img.style.height = 'auto';
});

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

考虑使用专业库如 medium-zoom 实现更丰富的功能。

import mediumZoom from 'medium-zoom';

mediumZoom('[data-zoomable]', {
    margin: 24,
    background: '#000',
    scrollOffset: 40
});