js 实现图片功能
图片加载与显示
在JavaScript中加载并显示图片可以通过Image对象或直接操作DOM实现。创建一个新的Image实例并设置其src属性即可触发图片加载：
const img = new Image();
img.src = 'path/to/image.jpg';
document.body.appendChild(img);通过DOM操作动态添加<img>标签：
const imgElement = document.createElement('img');
imgElement.src = 'path/to/image.png';
imgElement.alt = 'Description';
document.getElementById('container').appendChild(imgElement);图片预加载
预加载多张图片可提升用户体验，使用Promise结合Image对象实现批量加载：
function preloadImages(urls) {
return Promise.all(
urls.map(url => new Promise((resolve) => {
const img = new Image();
img.src = url;
img.onload = () => resolve(url);
}))
);
}
preloadImages(['image1.jpg', 'image2.png']).then(() => {
console.log('All images loaded');
});图片懒加载
实现懒加载需结合IntersectionObserver API，当图片进入视口时再加载：
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));HTML中需将实际URL放在data-src属性中：
<img data-src="path/to/lazy-image.jpg" alt="Lazy Loaded">图片压缩与裁剪
使用Canvas API可实现客户端图片压缩与裁剪。以下示例将图片压缩为指定质量：
function compressImage(file, quality = 0.8) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => resolve(blob), 'image/jpeg', quality);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
}图片滤镜效果
通过Canvas的getImageData和putImageData方法可操作像素数据实现滤镜：
function applyGrayscale(imageElement) {
const canvas = document.createElement('canvas');
canvas.width = imageElement.width;
canvas.height = imageElement.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(imageElement, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // R
data[i + 1] = avg; // G
data[i + 2] = avg; // B
}
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL();
}图片上传与预览
实现文件上传前的本地预览：
document.getElementById('file-input').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file.type.match('image.*')) return;
const reader = new FileReader();
reader.onload = (event) => {
const preview = document.getElementById('preview');
preview.src = event.target.result;
};
reader.readAsDataURL(file);
});响应式图片处理
使用window.matchMedia实现响应式图片切换：
function checkScreenSize() {
const mediaQuery = window.matchMedia('(max-width: 768px)');
const img = document.getElementById('responsive-img');
img.src = mediaQuery.matches ? 'mobile.jpg' : 'desktop.jpg';
}
window.addEventListener('resize', checkScreenSize);
checkScreenSize(); // 初始检查
