前端压缩图片代码片段

/**
 * 读取文件
 * @param image File 需要压缩的图片
 * @returns Promise<HTMLImageElement>
 */
function readImg(image: File): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = document.createElement("img");
    const reader = new FileReader();
    reader.onload = function(e) {
      img.src = e.target?.result as string;
    };
    reader.onerror = function(e) {
      reject(e);
    };
    reader.readAsDataURL(image);
    img.onload = function() {
      resolve(img);
    };
    img.onerror = function(e) {
      reject(e);
    };
  });
}

/**
 * 压缩图片
 * @param image HTMLImageElement 压缩对象
 * @param type 压缩后需要转换的文件类型
 * @param maxWidth 触发压缩的图片最大宽度限制
 * @param maxHeight 触发压缩的图片最大高度限制
 * @returns Promise<Blob | null>
 */
function compressImg(
  image: HTMLImageElement,
  type: string,
  maxWidth: number,
  maxHeight: number
): Promise<Blob | null> {
  return new Promise(resolve => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d") as CanvasRenderingContext2D;
    const { width: originWidth, height: originHeight } = image;

    // 目标尺寸
    let targetWidth = originWidth;
    let targetHeight = originHeight;

    if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > 1) {
        // 过宽处理
        targetWidth = maxWidth;
        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
      } else {
        // 过高处理
        targetHeight = maxHeight;
        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
      }
    }
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 图片绘制
    context.drawImage(image, 0, 0, targetWidth, targetHeight);
    canvas.toBlob(function(blob) {
      resolve(blob);
    }, type || "image/png");
  });
}

// 调用压缩
export default async function startCompress(file: File): Promise<Blob | null> {
  const img = await readImg(file);
  const blob = await compressImg(img, file.type, 400, 400);
  return blob;
}