public-fuse/src/util/image-rotate.ts

export const imageRotate = async (
  url: string,
  direction: "row" | "column" = "row"
): Promise<void | Blob> => {
  const img = new Image();
  img.src = url;
  await new Promise((resolve) => (img.onload = resolve));

  let width = img.width;
  let height = img.height;
  if (width > height) {
    if (direction === "row") {
      return;
    }
    width = img.height;
    height = img.width;
  } else {
    if (direction === "column") {
      return;
    }
    width = img.height;
    height = img.width;
  }

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext("2d")!;

  const center =
    direction === "row" ? [img.width / 2, height / 2] : [img.height / 2, width / 2];
  ctx.translate(center[0], center[1]);
  ctx.rotate(((direction === "row" ? -1 : 1) * Math.PI) / 2);
  ctx.translate(-center[0], -center[1]);
  ctx.drawImage(img, 0, 0);

  return await new Promise<Blob>((resolve) =>
    canvas.toBlob(resolve as any, "image/png", 1)
  );
};

export const loadImage = async (blob: Blob) => {
  const img = new Image();
  img.src = URL.createObjectURL(blob);
  return new Promise<HTMLImageElement>((resolve) => (img.onload = () => resolve(img)));
};

export const fixImageSize = async (
  blob: Blob,
  max: number,
  min: number,
  scale = true
) => {
  const img = await loadImage(blob);

  let width = img.width;
  let height = img.height;
  if (!scale) {
    const diff = max - min;
    if (width > max) {
      max = width;
      min = max - diff;
    } else if (height > max) {
      max = height;
      min = max - diff;
    }
  }

  if (width > max) {
    height = (height / width) * max;
    width = max;
  } else if (height > max) {
    width = (width / height) * max;
    width = max;
  }
  let size = width > height ? width : height;
  size = size > min ? size : min;

  console.log(size, width, height);
  const $canvas = document.createElement("canvas");
  $canvas.width = size;
  $canvas.height = size;
  const ctx = $canvas.getContext("2d")!;
  ctx.rect(0, 0, size, size);
  ctx.fillStyle = "#fff";
  ctx.fill();
  ctx.drawImage(img, (size - width) / 2, (size - height) / 2, width, height);

  const newBlob = await new Promise<Blob | null>((resolve) =>
    $canvas.toBlob(resolve, "png")
  );
  return newBlob;
};

export const coverImageSize = async (
  blob: Blob,
  coverWidth: number,
  coverHeight: number,
  scale = true
) => {
  const img = await loadImage(blob);

  let width = img.width,
    useWidth;
  let height = img.height,
    useHeight;

  const proportion = coverWidth / coverHeight;
  const cProportion = width / height;

  if (cProportion > proportion) {
    useWidth = width;
    useHeight = width / proportion;
  } else if (cProportion < proportion) {
    // h偏大
    useWidth = height * proportion;
    useHeight = height;
  }

  const $canvas = document.createElement("canvas");
  $canvas.width = useWidth;
  $canvas.height = useHeight;
  const ctx = $canvas.getContext("2d")!;
  ctx.rect(0, 0, useWidth, useHeight);
  ctx.fillStyle = "#fff";
  ctx.fill();
  ctx.drawImage(img, (useWidth - width) / 2, (useHeight - height) / 2, width, height);

  const newBlob = await new Promise<Blob | null>((resolve) =>
    $canvas.toBlob(resolve, "png")
  );
  return {
    blob: newBlob!,
    width: useWidth,
    height: useHeight,
  };
};