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
});
