使用compressorjs进行图片压缩

前言

compressorjs文档地址：compressorjs - npm (npmjs.com)

一、接受的文件类型（File or Blob）

File: File - Web API 接口参考 | MDN (mozilla.org)
Blob: Blob - Web API 接口参考 | MDN (mozilla.org)

• 将base64转换为blob

  dataURLtoBlob(dataurl) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  },

• 将base64转换为file

dataURLtoFile(dataurl, filename) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
 }

• 将blob转base64

getBase64(blob) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
 },

二、封装工具类

/**
   * 图片压缩
   * @param {File} image 图片
   * @param {String} backType 需要返回的类型blob、file
   * @param {Number} quality 图片压缩比，数字越小，图片压缩越小
   * @return
   */
  compressorImage(image, backType, quality) {
    return new Promise((resolve, reject) => {
      // eslint-disable-next-line no-new
      new Compressor(image, {
        quality: quality || 0.8,
        success(result) {
          if (!backType || backType === 'blob') {
            resolve(result);
          } else if (backType === 'file') {
            const file = new File([result], image.name, { type: image.type });
            resolve(file);
          }  else if (backType === 'base64') {
            const reader = new FileReader();
            reader.readAsDataURL(result);
            reader.onload = () => resolve(reader.result);
            reader.onerror = (error) => reject(error);
          }
        },
        error(err) {
          reject(err);
        }
      });
    });
  },

三、其他

1.canvas.toDataURL()与canvas.toBlob()

• canvas.toDataURL()
  • 语法：canvas.toDataURL(type, encoderOptions);
    • type: 图片格式，默认为image/png
    • encoderOptions：在指定图片格式为 image/jpeg 或image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
  • toDataURL()同步的，在执行不同操作时会阻塞UI
• canvas.toBlob()
  • 语法：toBlob(callback, type, quality)
    • callback：回调函数，可获得一个单独的Blob对象参数。如果图像未被成功创建，可能会获得null值。
    • type: 图片格式，默认为image/png
    • quality：压缩比，在指定图片格式为 image/jpeg 或image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
  • toBlob()是异步的

2.自己实现图片压缩

手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件 - 掘金 (juejin.cn)