答案：通过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对大图可能存在内存限制，建议增加错误捕获和分片处理逻辑。
以上就是JavaScript实现图片压缩与上传_javascript图像处理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533676.html
微信扫一扫 
支付宝扫一扫 
