💄 style: support screenshot to clipboard when sharing (#6275)

Co-authored-by: jrr997 <[email protected]>

Author: jrr997

src/features/ShareModal/ShareImage/index.tsx

@@ -1,10 +1,12 @@
-import { Form, type FormItemProps } from '@lobehub/ui';
+import { Form, type FormItemProps, Icon } from '@lobehub/ui';
 import { Button, Segmented, Switch } from 'antd';
+import { CopyIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { useImgToClipboard } from '@/hooks/useImgToClipboard';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { ImageType, imageTypeOptions, useScreenshot } from '@/hooks/useScreenshot';
 import { useSessionStore } from '@/store/session';
@@ -32,7 +34,9 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
     title: currentAgentTitle,
     width: mobile ? 720 : undefined,
   });
-
+  const { loading: copyLoading, onCopy } = useImgToClipboard({
+    width: mobile ? 720 : undefined,
+  });
   const settings: FormItemProps[] = [
     {
       children: <Switch />,
@@ -66,15 +70,27 @@ const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
   const isMobile = useIsMobile();
 
   const button = (
-    <Button
-      block
-      loading={loading}
-      onClick={onDownload}
-      size={isMobile ? undefined : 'large'}
-      type={'primary'}
-    >
-      {t('shareModal.download')}
-    </Button>
+    <>
+      <Button
+        block
+        icon={<Icon icon={CopyIcon} />}
+        loading={copyLoading}
+        onClick={() => onCopy()}
+        size={isMobile ? undefined : 'large'}
+        type={'primary'}
+      >
+        {t('copy', { ns: 'common' })}
+      </Button>
+      <Button
+        block
+        loading={loading}
+        onClick={onDownload}
+        size={isMobile ? undefined : 'large'}
+        variant={'filled'}
+      >
+        {t('shareModal.download')}
+      </Button>
+    </>
   );
 
   return (

src/hooks/useImgToClipboard.ts

@@ -0,0 +1,29 @@
+import { App } from 'antd';
+import { t } from 'i18next';
+import { useState } from 'react';
+
+import { ImageType, getImageUrl } from './useScreenshot';
+
+export const useImgToClipboard = ({ id = '#preview', width }: { id?: string; width?: number }) => {
+  const [loading, setLoading] = useState(false);
+  const { message } = App.useApp();
+
+  const handleCopy = async () => {
+    setLoading(true);
+    try {
+      const dataUrl = await getImageUrl({ id, imageType: ImageType.PNG, width });
+      const blob = await fetch(dataUrl).then((res) => res.blob());
+      navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+      setLoading(false);
+      message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
+    } catch (error) {
+      console.error('Failed to copy image', error);
+      setLoading(false);
+    }
+  };
+
+  return {
+    loading,
+    onCopy: handleCopy,
+  };
+};

src/hooks/useScreenshot.ts

@@ -31,6 +31,58 @@ export const imageTypeOptions: SegmentedProps['options'] = [
   },
 ];
 
+export const getImageUrl = async ({
+  imageType,
+  id = '#preview',
+  width,
+}: {
+  id?: string;
+  imageType: ImageType;
+  width?: number;
+}) => {
+  let screenshotFn: any;
+  switch (imageType) {
+    case ImageType.JPG: {
+      screenshotFn = domToJpeg;
+      break;
+    }
+    case ImageType.PNG: {
+      screenshotFn = domToPng;
+      break;
+    }
+    case ImageType.SVG: {
+      screenshotFn = domToSvg;
+      break;
+    }
+    case ImageType.WEBP: {
+      screenshotFn = domToWebp;
+      break;
+    }
+  }
+
+  const dom: HTMLDivElement = document.querySelector(id) as HTMLDivElement;
+  let copy: HTMLDivElement = dom;
+
+  if (width) {
+    copy = dom.cloneNode(true) as HTMLDivElement;
+    copy.style.width = `${width}px`;
+    document.body.append(copy);
+  }
+
+  const dataUrl = await screenshotFn(width ? copy : dom, {
+    features: {
+      // 不启用移除控制符，否则会导致 safari emoji 报错
+      removeControlCharacter: false,
+    },
+    scale: 2,
+    width,
+  });
+
+  if (width && copy) copy?.remove();
+
+  return dataUrl;
+};
+
 export const useScreenshot = ({
   imageType,
   title = 'share',
@@ -47,46 +99,7 @@ export const useScreenshot = ({
   const handleDownload = useCallback(async () => {
     setLoading(true);
     try {
-      let screenshotFn: any;
-      switch (imageType) {
-        case ImageType.JPG: {
-          screenshotFn = domToJpeg;
-          break;
-        }
-        case ImageType.PNG: {
-          screenshotFn = domToPng;
-          break;
-        }
-        case ImageType.SVG: {
-          screenshotFn = domToSvg;
-          break;
-        }
-        case ImageType.WEBP: {
-          screenshotFn = domToWebp;
-          break;
-        }
-      }
-
-      const dom: HTMLDivElement = document.querySelector(id) as HTMLDivElement;
-      let copy: HTMLDivElement = dom;
-
-      if (width) {
-        copy = dom.cloneNode(true) as HTMLDivElement;
-        copy.style.width = `${width}px`;
-        document.body.append(copy);
-      }
-
-      const dataUrl = await screenshotFn(width ? copy : dom, {
-        features: {
-          // 不启用移除控制符，否则会导致 safari emoji 报错
-          removeControlCharacter: false,
-        },
-        scale: 2,
-        width,
-      });
-
-      if (width && copy) copy?.remove();
-
+      const dataUrl = await getImageUrl({ id, imageType, width });
       const link = document.createElement('a');
       link.download = `${BRANDING_NAME}_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
       link.href = dataUrl;