答案：通过Canvas API压缩图片可减少文件体积。先读取图片为Base64，绘制到缩放后的canvas，再导出为低质量Blob，最后用FormData上传，兼顾清晰度与性能，适用于现代浏览器环境。
在前端开发中，图片上传是常见需求，但大尺寸图片会增加服务器压力和加载时间。通过JavaScript实现图片压缩再上传，能有效减少文件体积，提升用户体验。以下是完整的实现思路与代码示例。
图片压缩原理
利用HTML5的Canvas API将原始图片绘制到画布上，通过调整尺寸或质量进行压缩，再导出为Blob或Data URL。这种方式不依赖后端，可在用户选择图片后立即处理。
关键步骤包括：
- 监听文件输入变化，获取用户选择的图片文件
- 使用FileReader读取图片为Base64
- 创建Image对象加载Base64数据
- 绘制到canvas并调用toBlob或toDataURL输出压缩结果
控制压缩质量与尺寸
可以通过设置canvas缩放比例和canvas.toBlob()的质量参数（0-1）来平衡清晰度与文件大小。
立即学习“Java免费学习笔记（深入）”；
示例代码：
function compressImage(file, maxWidth = 800, quality = 0.8) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const img = new Image(); img.src = reader.result; img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = (height * maxWidth) / width;
width = maxWidth;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
resolve(blob);
},
'image/jpeg',
quality
);
};
};
reader.onerror = reject; });
}
上传压缩后的图片
压缩完成后，将Blob对象封装进FormData，使用fetch或XMLHttpRequest发送到服务器。
上传示例：
async function uploadImage(file, url) { const compressedBlob = await compressImage(file); const formData = new FormData(); formData.append('image', compressedBlob, 'compressed.jpg');const response = await fetch(url, {
method: 'POST',
body: formData
});
return response.json();
}
绑定文件输入事件：
document.getElementById('fileInput').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file.type.startsWith('image/')) return;try {
const result = await uploadImage(file, '/api/upload');
console.log('上传成功:', result);
} catch (err) {
console.error('上传失败:', err);
}
});
基本上就这些。核心是利用canvas完成前端图像降质缩放，既减轻网络负担，又避免原图直接上传带来的性能问题。注意兼容性：现代浏览器均支持，iOS Safari对大图可能存在内存限制，建议增加错误捕获和分片处理逻辑。
