import { getTextBound, toDegrees } from ".";

const canvas = document.createElement("canvas");
// 水印添加函数
export const addWatermark = (imgURL: string, pos: number[], ration: number) => {
  const ctx = canvas.getContext("2d");
  const image = new Image();
  image.src = imgURL;
  image.crossOrigin = 'anonymous';

  return new Promise<Blob>((resolve, reject) => {
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0, image.width, image.height);

      const font = `${ration * 20}px Arial`;
      const lines = `经度: ${toDegrees(pos[0])}\n纬度: ${toDegrees(pos[1])}`.split("\n");
      const lineTopPadding = 5 * ration;
      const lineBounds = lines.map((line) =>
        getTextBound(line, font, [lineTopPadding, 0])
      );
      const bound = lineBounds.reduce(
        (t, { width, height }) => {
          t.width = Math.max(t.width, width);
          t.height += height;
          return t;
        },
        { width: 0, height: 0 }
      );
      const padding = 20 * ration;
      const margin = 80 * ration;

      const position = [
        image.width - margin - bound.width,
        image.height - margin - bound.height,
      ];

      ctx.rect(
        position[0] - padding,
        position[1] - padding,
        bound.width + 2 * padding,
        bound.height + 2 * padding
      );
      ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
      ctx.fill();

      ctx.font = font;
      ctx.textBaseline = "top";
      ctx.fillStyle = "#fff";
      let itemTop = 0;
      lines.forEach((line, ndx) => {
        ctx.fillText(line, position[0], position[1] + itemTop + lineTopPadding);
        itemTop += lineBounds[ndx].height;
      });
      canvas.toBlob(blob => {
        resolve(blob)
      }, "image/jpeg", 1)
    };
    image.onerror = reject;
  });
};