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

上篇文章是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)
        }
      }