答案：通过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免费学习笔记（深入）”；
示例代码：
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
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对大图可能存在内存限制，建议增加错误捕获和分片处理逻辑。
