lobe-chat

1
const copyUsingFallback = (imageUrl: string) => {
2
  const img = new Image();
3
  img.addEventListener('load', function () {
4
    const canvas = document.createElement('canvas');
5
    canvas.width = img.width;
6
    canvas.height = img.height;
7
    const ctx = canvas.getContext('2d');
8
    ctx!.drawImage(img, 0, 0);
9

10
    try {
11
      canvas.toBlob(function (blob) {
12
        // @ts-ignore
13
        const item = new ClipboardItem({ 'image/png': blob });
14
        navigator.clipboard.write([item]).then(function () {
15
          console.log('Image copied to clipboard successfully using canvas and modern API');
16
        });
17
      });
18
    } catch {
19
      // 如果 toBlob 或 ClipboardItem 不被支持，使用 data URL
20
      const dataURL = canvas.toDataURL('image/png');
21
      const textarea = document.createElement('textarea');
22
      textarea.value = dataURL;
23
      document.body.append(textarea);
24
      textarea.select();
25

26
      document.execCommand('copy');
27

28
      textarea.remove();
29
    }
30
  });
31
  img.src = imageUrl;
32
};
33

34
const copyUsingModernAPI = async (imageUrl: string) => {
35
  try {
36
    const base64Response = await fetch(imageUrl);
37
    const blob = await base64Response.blob();
38
    const item = new ClipboardItem({ 'image/png': blob });
39
    await navigator.clipboard.write([item]);
40
  } catch (error) {
41
    console.error('Failed to copy image using modern API:', error);
42
    copyUsingFallback(imageUrl);
43
  }
44
};
45

46
export const copyImageToClipboard = async (imageUrl: string) => {
47
  // 检查是否支持现代 Clipboard API
48
  if (navigator.clipboard && 'write' in navigator.clipboard) {
49
    await copyUsingModernAPI(imageUrl);
50
  } else {
51
    copyUsingFallback(imageUrl);
52
  }
53
};
54