js实现图片压缩
使用Canvas实现图片压缩
使用HTML5的Canvas元素可以对图片进行压缩处理。Canvas提供了绘制和操作图像的功能，通过调整画布大小和图像质量参数实现压缩。
function compressImage(file, quality, maxWidth, maxHeight, callback) {
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > maxWidth || height > maxHeight) {
const ratio = Math.min(maxWidth / width, maxHeight / height);
width = width * ratio;
height = height * ratio;
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(callback, 'image/jpeg', quality);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}使用第三方库实现压缩
对于更复杂的压缩需求，可以使用专门的图片处理库如Compressor.js。这个库提供了更多配置选项和更好的压缩效果。
import Compressor from 'compressorjs';
new Compressor(file, {
quality: 0.6,
maxWidth: 800,
maxHeight: 800,
success(result) {
// 处理压缩后的文件
},
error(err) {
console.error(err.message);
},
});使用Web Worker处理大图片
对于大尺寸图片的压缩，为了避免阻塞主线程，可以使用Web Worker在后台线程中进行处理。
// worker.js
self.onmessage = function(e) {
const { file, quality, maxWidth, maxHeight } = e.data;
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = new OffscreenCanvas(img.width, img.height);
// 压缩逻辑...
const blob = canvas.convertToBlob({ type: 'image/jpeg', quality });
self.postMessage({ blob });
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
};优化压缩参数
调整压缩参数可以在文件大小和图像质量之间取得平衡。关键参数包括质量系数（0-1）、目标尺寸和输出格式。
// 推荐参数设置示例
const settings = {
quality: 0.7, // 中等质量
maxWidth: 1024, // 最大宽度
maxHeight: 1024, // 最大高度
mimeType: 'image/jpeg' // 输出格式
};处理不同图片格式
不同图片格式需要不同的压缩策略。JPEG适合照片类图像，PNG适合需要透明度的图像，WebP则提供更好的压缩率。
function getOutputFormat(file) {
if (file.type === 'image/png') return 'image/png';
if (file.type === 'image/webp') return 'image/webp';
return 'image/jpeg'; // 默认使用JPEG
}客户端批量压缩
对于需要批量处理多张图片的场景，可以使用Promise.all实现并行压缩。
async function batchCompress(files, options) {
const promises = files.map(file => {
return new Promise((resolve) => {
compressImage(file, options, resolve);
});
});
return await Promise.all(promises);
}压缩结果预览
提供实时预览功能可以让用户看到压缩效果，便于调整参数。
function showPreview(blob) {
const preview = document.getElementById('preview');
const url = URL.createObjectURL(blob);
preview.src = url;
}注意事项
- 压缩比例过高会导致明显质量损失
- 某些浏览器对Canvas有尺寸限制
- 透明背景的PNG转换为JPEG时会变成黑色背景
- iOS设备上需要注意内存管理问题
