lobe-chat

1
const compressImage = ({ img, type = 'image/webp' }: { img: HTMLImageElement; type?: string }) => {
2
  // 设置最大宽高
3
  const maxWidth = 2160;
4
  const maxHeight = 2160;
5
  let width = img.width;
6
  let height = img.height;
7

8
  if (width > height && width > maxWidth) {
9
    // 如果图片宽度大于高度且大于最大宽度限制
10
    width = maxWidth;
11
    height = Math.round((maxWidth / img.width) * img.height);
12
  } else if (height > width && height > maxHeight) {
13
    // 如果图片高度大于宽度且大于最大高度限制
14
    height = maxHeight;
15
    width = Math.round((maxHeight / img.height) * img.width);
16
  }
17

18
  const canvas = document.createElement('canvas');
19
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
20

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

24
  ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
25

26
  return canvas.toDataURL(type);
27
};
28

29
export default compressImage;
30