js实现缩略图
使用 Canvas 实现缩略图
通过 Canvas 的 drawImage 方法缩放图像并生成缩略图。将原图绘制到缩小后的 Canvas 上，再导出为 Base64 或 Blob。
function createThumbnail(file, maxWidth, maxHeight, callback) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width);
width = maxWidth;
}
if (height > maxHeight) {
width = Math.round((width * maxHeight) / height);
height = maxHeight;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(callback, 'image/jpeg', 0.8);
};
img.src = URL.createObjectURL(file);
}使用第三方库（如 sharp 或 Jimp）
Node.js 环境下可使用专业图像处理库。sharp 适合高性能处理，Jimp 纯 JavaScript 实现更轻量。
sharp 示例：
const sharp = require('sharp');
sharp('input.jpg')
.resize(200, 200)
.toFile('thumbnail.jpg');Jimp 示例：
const Jimp = require('jimp');
Jimp.read('input.jpg')
.then(image => image.resize(200, 200).write('thumbnail.jpg'));纯 CSS 缩略图方案
通过 CSS 的 object-fit 属性实现视觉缩放，不改变实际文件大小但适合展示：
<img src="large-image.jpg" class="thumbnail" />
<style>
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover;
}
</style>服务端生成缩略图
PHP 示例使用 GD 库：
$srcImage = imagecreatefromjpeg('original.jpg');
$thumbnail = imagescale($srcImage, 200);
imagejpeg($thumbnail, 'thumbnail.jpg');
imagedestroy($srcImage);Python 使用 Pillow：
from PIL import Image
img = Image.open('original.jpg')
img.thumbnail((200, 200))
img.save('thumbnail.jpg')注意事项
- 客户端生成缩略图需考虑浏览器兼容性，Canvas 方案兼容主流浏览器
- 大文件处理建议使用 Web Worker 避免阻塞主线程
- 服务端生成更适合批量处理，减轻客户端负担
- 质量参数（如 JPEG 压缩比）需根据实际需求调整
