compressImage.ts

export type CompressImageOptions = {
  /**
   * 最大宽度
   */
  maxWidth?: number;
  /**
   * 最大高度
   */
  maxHeight?: number;
  /**
   * 图片质量，仅有 image/jpeg 和 image/webp 类型时才有效
   */
  quality?: number;
  /**
   * 图片类型, 默认为 image/jpeg，可选值为 image/png，image/webp；如果是 image/png，则quality参数无效，只能通过宽高来进行压缩
   */
  imageType?: 'image/jpeg' | 'image/png' | 'image/webp';
};

/**
 * 压缩图片
 */
function compressImage(file: File, options?: CompressImageOptions): Promise<Blob | null> {
  const {
    maxWidth = 1080,
    maxHeight = 1080,
    quality = 0.92,
    imageType = 'image/jpeg',
  } = options || {};
  return new Promise((resolve, reject) => {
    if (!file) {
      console.error('未选择文件');
      reject('未选择文件');
      return;
    }

    const image = new Image();
    const reader = new FileReader();

    reader.onload = (e) => {
      if (e.target && e.target.result) {
        image.src = e.target.result as string;

        image.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');

          if (!ctx) {
            console.error('无法获取 Canvas 上下文');
            reject('无法获取 Canvas 上下文');
            return;
          }

          // 计算调整后的宽度和高度，保持纵横比
          let newWidth = image.width;
          let newHeight = image.height;

          // 只有当图片的宽度和高度都大于最大值时才需要进行分辨率的调整
          if (newWidth > maxWidth && newHeight > maxHeight) {
            if (newWidth < newHeight) {
              newWidth = maxWidth;
              newHeight = (image.height * maxWidth) / image.width;
            } else {
              newHeight = maxHeight;
              newWidth = (image.width * maxHeight) / image.height;
            }
          }

          // 设置 Canvas 大小并绘制图片
          canvas.width = newWidth;
          canvas.height = newHeight;
          ctx.drawImage(image, 0, 0, newWidth, newHeight);

          // 将 Canvas 上的图像转换为 Blob
          canvas.toBlob(
            async (blob) => {
              if (!blob) {
                console.error('无法生成 Blob 对象');
                reject('无法生成 Blob 对象');
                return;
              }

              // 返回压缩后的 Blob
              resolve(blob);
            },
            imageType,
            quality,
          ); // quality 是 JPEG 压缩质量，可以根据需要调整
        };
      }
    };

    reader.readAsDataURL(file);
  });
}

export default compressImage;