lobe-chat

1
export const imageToBase64 = ({
2
  size,
3
  img,
4
  type = 'image/webp',
5
}: {
6
  img: HTMLImageElement;
7
  size: number;
8
  type?: string;
9
}) => {
10
  const canvas = document.createElement('canvas');
11
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
12
  let startX = 0;
13
  let startY = 0;
14

15
  if (img.width > img.height) {
16
    startX = (img.width - img.height) / 2;
17
  } else {
18
    startY = (img.height - img.width) / 2;
19
  }
20

21
  canvas.width = size;
22
  canvas.height = size;
23

24
  ctx.drawImage(
25
    img,
26
    startX,
27
    startY,
28
    Math.min(img.width, img.height),
29
    Math.min(img.width, img.height),
30
    0,
31
    0,
32
    size,
33
    size,
34
  );
35

36
  return canvas.toDataURL(type);
37
};
38

39
export const imageUrlToBase64 = async (
40
  imageUrl: string,
41
): Promise<{ base64: string; mimeType: string }> => {
42
  try {
43
    const res = await fetch(imageUrl);
44
    const blob = await res.blob();
45
    const arrayBuffer = await blob.arrayBuffer();
46

47
    const base64 =
48
      typeof btoa === 'function'
49
        ? btoa(
50
            new Uint8Array(arrayBuffer).reduce(
51
              (data, byte) => data + String.fromCharCode(byte),
52
              '',
53
            ),
54
          )
55
        : Buffer.from(arrayBuffer).toString('base64');
56

57
    return { base64, mimeType: blob.type };
58
  } catch (error) {
59
    console.error('Error converting image to base64:', error);
60
    throw error;
61
  }
62
};
63