前端实现图片压缩的主要方法有：
-
使用 HTML5 的 API
利用 canvas 将图片绘制到画布上，然后通过 toDataURL 方法获取压缩后的图片数据。 -
使用第三方库
借助 compressorjs、browser-image-compression 等开源库，快速实现高质量的图片压缩功能。
方法一：基于 的图片压缩
function compressImage(file, quality = 0.8) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = (e) => {const img = new Image();img.src = e.target.result;img.onload = () => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 设置画布宽高canvas.width = img.width;canvas.height = img.height;// 绘制图片到画布ctx.drawImage(img, 0, 0, img.width, img.height);// 获取压缩后的图片数据canvas.toBlob((blob) => {resolve(blob);},'image/jpeg', // 输出格式quality // 压缩质量);};img.onerror = reject;};reader.onerror = reject;reader.readAsDataURL(file);});
}方法二：使用 browser-image-compression
import imageCompression from 'browser-image-compression';async function compressImage(file) {const options = {maxSizeMB: 1, // 压缩后的文件大小限制maxWidthOrHeight: 1920, // 最大宽高useWebWorker: true, // 开启 Web Worker 提升性能};try {const compressedFile = await imageCompression(file, options);return compressedFile;} catch (error) {console.error('压缩失败:', error);}
}使用场景与注意事项
- 图片质量与压缩比需要权衡。
- 压缩算法的兼容性需要在不同浏览器中验证。
- 对于较大的图片，建议采用 Web Worker 防止主线程阻塞。
