前端图片压缩解决办法

关注

VIP免费原创最新推荐文章于 2026-06-10 20:58:01 发布 6.2k 阅读 AI 写同款· GEO 优化 ›

包体积优化(二)：压缩图片以及转化成webp插件，997页字节跳动Android面试真题解析火爆全网随着我们业务的增加，我们的包体积越来越大，包体积越小对于咱们app的转化率越高，这章节讲一下图片的统一处理逻辑。占用包体积的最大的因素 so文件，使用动态加载so，不把so打包在包内，请参考动态加载so 图片的处理，使用aop思想处理本app、第三方aar以及第三方jar中的图片，本节的内容二。一些减少包体积的方法压缩代码，移除未使用的资源。使用ProGuard进行压缩减少枚举使用精简语言资源使用矢量图仅支持特定密度资源混淆 AndroidResGuard R文件内联 Bytex 插件阅读详情

问题产生背景

在某一h5的项目，要求上传的图片格式为 base64 , 问题是用户上传的图片基本都在MB 级别，转base64 以后，图片的体积会增大30%以上，随着图片的体积增加，转换的base64 格式文件体积越大，如果此时前端不对用户上传的图片体积进行压缩，可能会导致服务器压力过大，从而崩溃；

解决办法

1、使用纯 js 解决

解决思路：
1、通过 input 文件选择框拿到要上传的图片文件file
2、FileReader.readAsDataURL() 读取 file 内容。完成后 result 属性中将包含一个 data: URL格式的 Base64字符串以表示所读取文件的内容。
3、创建一个 img 标签，将 FileReader 对象返回的 base64 格式 url 给到一个 img 标签
4、img.onload() 函数中获取图片的尺寸，再通过 canvas.drawImage() 绘制图像，设置尺寸或者图像的质量等
canvas.toDataURL(file.type, quality) 设置图像的质量，将 canvas 转换为图片 base64 格式
代码如下所示：

compressImg(file) {
   
   
    const reader = new FileReader();
        // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，
        // 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
        reader.readAsDataURL(file);
        reader.onload = () => {
   
   
          const img = new Image();
          img.src = reader.result;
          img.onload = () => {
   
   
            // 图片的宽高
            const w = img.width;
            const h = img.height;
            const canvas = document.createElement("canvas");
            // canvas对图片进行裁剪，这里设置为图片的原始尺寸
            canvas.width