JavaScript实现图片压缩与上传_javascript图像处理-js教程-PHP中文网

JavaScript实现图片压缩与上传_javascript图像处理

夜晨

发布： 2025-10-30 15:31:02

原创

996人浏览过

答案：通过Canvas API压缩图片可减少文件体积。先读取图片为Base64，绘制到缩放后的canvas，再导出为低质量Blob，最后用FormData上传，兼顾清晰度与性能，适用于现代浏览器环境。

javascript实现图片压缩与上传_javascript图像处理

在前端开发中，图片上传是常见需求，但大尺寸图片会增加服务器压力和加载时间。通过JavaScript实现图片压缩再上传，能有效减少文件体积，提升用户体验。以下是完整的实现思路与代码示例。

图片压缩原理

利用HTML5的Canvas API将原始图片绘制到画布上，通过调整尺寸或质量进行压缩，再导出为Blob或Data URL。这种方式不依赖后端，可在用户选择图片后立即处理。

关键步骤包括：

监听文件输入变化，获取用户选择的图片文件
使用FileReader读取图片为Base64
创建Image对象加载Base64数据
绘制到canvas并调用toBlob或toDataURL输出压缩结果

控制压缩质量与尺寸

可以通过设置canvas缩放比例和canvas.toBlob()的质量参数（0-1）来平衡清晰度与文件大小。

立即学习“Java免费学习笔记（深入）”；

示例代码：

图酷AI

下载即用！可以免费使用的AI图像处理工具，致力于为用户提供最先进的AI图像处理技术，让图像编辑变得简单高效。

查看详情

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图像处理的详细内容，更多请关注php中文网其它相关文章！