前端图片压缩三方库browser-image-compression的使用实践

20251106再次实测补充:使用过程中发现browser-image-compression的压缩耗时较长,达到compressorjs的5倍,开始以为是开了WebWorker,但是关了以后耗时没有任何改善,鉴于一次压缩图片数量不多(最多8张,大多数时候只有一两张),不需要后台执行,另外也没有压缩png图片的需求,所以改换compressorjs,这样一张8M左右的手机照片,压缩时间能从2.2秒降低到0.4秒,可谓提速非常明显了,另外设置参数convertSize: 1000000, 1MB以上的png转换为JPEG.

------------------------------------------------------------------------

再次实测补充:browser-image-compression是三个库中唯一可以真正压缩PNG图片的,压缩率取决于图片内容,比如透明较多的图片,压缩率较高;compressorjs对png几乎无法压缩,但可以配置当PNG图片大小大于多少转成JPG进行压缩(browser-image-compression没有这个配置参数,但这种逻辑简单,可以自己写),然后他的方法不是promise用起来不太方便;第三个image-conversion有点自欺欺人了,PNG放进去是转jpg压缩后又转回png,结果就是透明的部分不透明了;

------------------------------------------------------------------------

上篇文章是deepseek给出的前端图片压缩方案建议,后经过查看各第三方库的github项目和压缩后相同大小文件的对比,可以得出结论,这几个三方库其实也都是浏览器原生Canvas API的封装.当然,不管它们怎么实现的,只要用起来方便好用就行了,其中browser-image-compression支持WebWorker，压缩大图片时不易阻塞界面交互, image-conversion特色是压缩到指定大小,我的需求还是保证肉眼看不出明细区别为前提,尽量压缩,所以固定一个大小并不是我的需求,测试过大小设置太小则大图片失真严重,设置过大则小图片基本没压缩,最终还是使用前者,前者一个主意事项是,压缩后返回的是blob,如果原来上传方法要传file,则要转换一下,方法和其他注意事项见代码:

// 循环对图片进行上传,如果有上传失败的进行提示
      // console.log("=====上传前图片==", fileList.value)
      for (const item of fileList.value) {

        if (item.status === 'done') {
          continue
        }
        const sourceFile = item.file;
        if (sourceFile) {

          let upFile = null
          //如果是图片
          if (sourceFile.type && sourceFile.type.startsWith('image/')) {
            // 对图片进行压缩
            const options = {
              maxSizeMB: 0.5, // 最大文件大小（MB）(作用不大,主要看质量和分辨率)
              // maxWidthOrHeight: 8000, // 最大宽或高
              useWebWorker: true, // 使用WebWorker，避免阻塞界面
              initialQuality: 0.6, // 初始压缩质量（0-1）(经测试0.6及以上肉眼看区别不明显,以下会出现偏色色块)
              alwaysKeepResolution: true,//保持高宽(即保持分辨率,对有文字的图片,能最大程度保证文字可读)
            };
            try {
              const compressedFile = await imageCompression(sourceFile, options);
              // console.log('压缩成功,压缩后大小===', compressedFile.size/1024 +'K');
              // 压缩后是blob需要转换回file
              upFile = new File([compressedFile], compressedFile.name, { type: compressedFile.type });
            } catch (error) {
              console.error('压缩失败:', error);
            }
          }
          if(upFile == null) {
            upFile = sourceFile;
          }
          const formData = new FormData();

          formData.append('file', upFile);
          formData.append('checkId', resData.id);
          formData.append('upType', '1');// 类型:问题照片

          const uploadRes = await AxiosPost( VITE_APP_API_CHECKS+'/api/checks/checks/uploadImg', formData)
          // 如果失败,进行提示
          if(!uploadRes.success){
            showFailToast('上传失败!'+uploadRes.msg)
            return
          }

          // console.log('===========uploadRes:', uploadRes)
        }
      }