js实现thumbnail
使用Canvas生成缩略图
通过HTML5 Canvas可以轻松实现图片缩略图功能。这种方法适合在浏览器端处理，无需服务器参与。
function createThumbnail(file, width, height, callback) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 保持宽高比
const ratio = Math.min(width/img.width, height/img.height);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
callback(canvas.toDataURL('image/jpeg'));
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}使用第三方库
对于更复杂的缩略图需求，可以考虑使用成熟的JavaScript库：
// 使用sharp.js（需在Node.js环境）
const sharp = require('sharp');
async function createThumbnail(inputPath, outputPath, width, height) {
await sharp(inputPath)
.resize(width, height)
.toFile(outputPath);
}响应式缩略图方案
结合CSS和少量JavaScript可以实现响应式缩略图：
<style>
.thumbnail-container {
width: 100%;
max-width: 300px;
}
.thumbnail {
width: 100%;
height: auto;
object-fit: cover;
}
</style>
<script>
function responsiveThumbnail(imgElement) {
const container = imgElement.parentElement;
const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight;
container.style.aspectRatio = aspectRatio;
}
</script>缩略图缓存策略
为提高性能，可以实现缩略图缓存：
const thumbnailCache = {};
function getCachedThumbnail(url, size, callback) {
const cacheKey = `${url}-${size}`;
if (thumbnailCache[cacheKey]) {
callback(thumbnailCache[cacheKey]);
return;
}
createThumbnail(url, size, size, (thumbnail) => {
thumbnailCache[cacheKey] = thumbnail;
callback(thumbnail);
});
}缩略图质量优化
调整缩略图质量和文件大小：
function optimizeThumbnailQuality(canvas, quality = 0.8) {
return canvas.toDataURL('image/jpeg', quality);
}每种方法适用于不同场景，浏览器端处理适合简单需求，Node.js方案适合服务器端处理，而响应式方案适合现代网页应用。根据具体需求选择最适合的实现方式。
