js实现缩略图
实现缩略图的方法
使用Canvas生成缩略图
通过Canvas的drawImage方法调整图片尺寸，生成缩略图。需先加载原图，再在Canvas上绘制缩放后的图像：
function createThumbnail(imageUrl, width, height) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
const thumbnailUrl = canvas.toDataURL('image/jpeg');
console.log(thumbnailUrl); // 输出Base64缩略图
};
img.src = imageUrl;
}使用CSS直接缩放
通过HTML和CSS直接控制图片显示尺寸，适用于非精确缩略图场景：
<img src="original.jpg" class="thumbnail" />
<style>
.thumbnail {
width: 100px;
height: auto;
object-fit: cover;
}
</style>服务端生成缩略图（Node.js示例）
使用Sharp库处理图片，适合批量或高性能需求：
const sharp = require('sharp');
sharp('input.jpg')
.resize(200, 200)
.toFile('output-thumbnail.jpg');监听文件上传实时生成
结合File API实现客户端上传时预览缩略图：
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
// 使用Canvas处理逻辑
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});注意事项
- 跨域问题：Canvas处理跨域图片需设置
img.crossOrigin = 'Anonymous'。 - 质量损耗：Canvas可通过
toDataURL的第二个参数调整JPEG质量（0-1）。 - 比例保持：计算缩放宽高时建议锁定原图比例，避免变形。
