图片压缩

图片压缩js

import ImageCompressor from 'image-compressor.js';

export function compressFile(file) {
  return new Promise((resolve, reject) => {
    const options = {
      success(result) {
        // 将压缩后的 Blob 转换为 File 对象（如果组件支持Blob则不用这一步）
        const compressedFile = new File([result], file.name, {
          type: file.type,
          lastModified: Date.now(),
        });
        resolve(compressedFile);
      },
      error(e) {
        reject(e);
      },
    };
    // file.size > 5 * 1024 * 1024
    if (file.size <= 1 * 1024 * 1024) {
      options.quality = 0.8; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    if (file.size > 1 * 1024 * 1024&&file.size <=3 * 1024 * 1024) {
        options.quality = 0.5; // 压缩质量
        options.convertSize = false;//不进行图像尺寸的调整
        options.checkOrientation = false; // 图片翻转，默认为false
      }
      if (file.size > 3 * 1024 * 1024&&file.size <=5 * 1024 * 1024) {
        options.quality =0.4; // 压缩质量 
        options.convertSize = false;//不进行图像尺寸的调整
        options.checkOrientation = false; // 图片翻转，默认为false
      }
      if (file.size > 5 * 1024 * 1024&&file.size <=10 * 1024 * 1024) {
        options.quality = 0.4; // 压缩质量
        options.convertSize = false;//不进行图像尺寸的调整
        options.checkOrientation = false; // 图片翻转，默认为false
      }
    new ImageCompressor(file, options);
  });
}
//
export function compressFile1(file) {
  return new Promise((resolve, reject) => {
    const options = {
      success(result) {
        // 将压缩后的 Blob 转换为 File 对象（如果组件支持Blob则不用这一步）
        const compressedFile = new File([result], file.name, {
          type: file.type,
          lastModified: Date.now(),
        });
        resolve(compressedFile);
      },
      error(e) {
        reject(e);
      },
    };
    // file.size > 5 * 1024 * 1024
    if (file.size <= 1 * 1024 * 1024) {
      options.quality = 0.8; // 压缩质量
      options.convertSize = false;//不进行图像尺寸的调整
      options.checkOrientation = false; // 图片翻转，默认为false
    }
    if (file.size > 1 * 1024 * 1024&&file.size <=3 * 1024 * 1024) {
        options.quality = 0.5; // 压缩质量
        options.convertSize = false;//不进行图像尺寸的调整
        options.checkOrientation = false; // 图片翻转，默认为false
      }
      if (file.size > 3 * 1024 * 1024&&file.size <=5 * 1024 * 1024) {
        options.quality =0.05; // 压缩质量 
        options.convertSize = false;//不进行图像尺寸的调整
        options.checkOrientation = false; // 图片翻转，默认为false
      }
      if (file.size > 5 * 1024 * 1024) {
        options.quality = 0.01; // 压缩质量
        options.convertSize = false;//不进行图像尺寸的调整
        options.checkOrientation = false; // 图片翻转，默认为false
      }
      console.log("file")
      console.log(file)
    new ImageCompressor(file, options);
  });
}

main.js

import {compressFile,} from '@/utils/compressFile';

Vue.prototype.$compressFile = compressFile;

async uploadFn(file) {
      const fileSize = file.file.size / 1024 / 1024 < 10
      if (!fileSize) {
        this.$message({
          message: '上传图片大小不能超过 10M!',
          type: 'warning'
        })
        // this.fileList = []
        // this.shopArry = []
        return Promise.reject()
      }
      // console.log(file)
      let compressedFile   
      if(!this.isCompress){
         compressedFile = file.file;
      }else{
         compressedFile = await this.$compressFile(file.file);
      }
     
      console.log(compressedFile, "compressedFile");
      console.log(file.file, "file.file");
      console.log(compressedFile.size, "压缩后大小1123");
      this.hasePic = file.file.uid
      console.log(file.file.size);
      getSignedUrl({
        bucketType: "image",
        allowPrefixes: [`${this.allowPrefixesList[Number(this.bucketType)]}/*`],
      })
        .then((res) => {
          localStorage.setItem("YYZX_sessionToken", JSON.stringify(res.data));
          let cos = new COS({
            SecretId: JSON.parse(localStorage.getItem("YYZX_sessionToken")).credentials
              .tmpSecretId,
            SecretKey: JSON.parse(localStorage.getItem("YYZX_sessionToken")).credentials
              .tmpSecretKey,
            XCosSecurityToken: JSON.parse(localStorage.getItem("YYZX_sessionToken"))
              .credentials.sessionToken,
          });
          this.Showload = true;
          const filename = ".png";
          const fileId = `${IMGDOMAIN}/${this.allowPrefixesList[Number(this.bucketType)]}/` + new Date().getTime() + filename;

          // putObject
          cos.uploadFile(
            {
              Bucket: "bsy-bs-img-1308012692" /* 必须 存储桶上传文件的名称 */,
              Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
              // Key: `${IMGDOMAIN}/popupWindow/` + (new Date().getTime()) + filename,
              Key: fileId,
              StorageClass: "STANDARD", // 默认配置
              Body: compressedFile, // file.file上传文件对象路径
              // SliceSize:
              // 1024 *
              // 1024 *
              // 1 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
              onProgress: (progressData) => {
                console.log(JSON.stringify(progressData));
                this.percent = progressData.percent * 100; // 进度条
              },
              Headers: {
                // 通过 imageMogr2 接口进行 webp 压缩，可以根据需要压缩的类型填入不同的压缩格式：webp/heif/tpg/avif/svgc
                "Pic-Operations": JSON.stringify({
                  is_pic_info: 1,
                  rules: [
                    {
                      fileid: fileId,
                      rule: "imageMogr2/quality/20",
                    },
                  ],
                }),
              },
            },
            (err, data) => {
              console.log(err);
              console.log("成功", data);
              const Location = data.Location;
              const filePath = Location.match(/\/([^/]+\/[^/]+)$/)[1];
              console.log("更换商家BannerLogo-输出", filePath);
              if (err) {
                return;
                // this.$message.fail('上传错误,请检查后重新上传!')
              }
              console.log(this.fileList);
              this.shopArry.push({ url: filePath, uid: file.file.uid });
              console.log(this.shopArry);

              const timer = setTimeout(() => {
                this.Showload = false;
                clearTimeout(timer);
              }, 1000);

              this.$emit('getImg', this.shopArry)
            }
          );
          console.log(res);
        })
        .catch((err) => {
          console.log(res);
        });
    },