feat(ui): fix copy image, add context menu to IAIDndImage

- restore copy image functionality* in image context menu, current image buttons - give IAIDndImage the same context menu * copying image to clipboard is not possible on Firefox unless the user enables a setting which is disabled by default. if the browser does not support copying an image, the copy functionality is disabled.
2024-08-30 20:32:17 +00:00 · 2023-07-17 19:00:59 +10:00 · 2023-07-17 19:00:59 +10:00 · 380aa1d7b5
commit 380aa1d7b5
parent 81ccbc5c6a
8 changed files with 271 additions and 164 deletions
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@ -572,6 +572,7 @@
        "uploadFailedInvalidUploadDesc": "Must be single PNG or JPEG image",
        "downloadImageStarted": "Image Download Started",
        "imageCopied": "Image Copied",
+        "problemCopyingImage": "Unable to Copy Image",
        "imageLinkCopied": "Image Link Copied",
        "problemCopyingImageLink": "Unable to Copy Image Link",
        "imageNotLoaded": "No Image Loaded",
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@ -21,6 +21,7 @@ import { ImageDTO } from 'services/api/types';
 import { mode } from 'theme/util/mode';
 import IAIDraggable from './IAIDraggable';
 import IAIDroppable from './IAIDroppable';
+import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';

 type IAIDndImageProps = {
  imageDTO: ImageDTO | undefined;
@ -96,119 +97,124 @@ const IAIDndImage = (props: IAIDndImageProps) => {
      };

  return (
-    <Flex
-      sx={{
-        width: 'full',
-        height: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-        minW: minSize ? minSize : undefined,
-        minH: minSize ? minSize : undefined,
-        userSelect: 'none',
-        cursor: isDragDisabled || !imageDTO ? 'default' : 'pointer',
-      }}
-    >
-      {imageDTO && (
+    <ImageContextMenu imageDTO={imageDTO}>
+      {(ref) => (
        <Flex
+          ref={ref}
          sx={{
-            w: 'full',
-            h: 'full',
-            position: fitContainer ? 'absolute' : 'relative',
+            width: 'full',
+            height: 'full',
            alignItems: 'center',
            justifyContent: 'center',
+            position: 'relative',
+            minW: minSize ? minSize : undefined,
+            minH: minSize ? minSize : undefined,
+            userSelect: 'none',
+            cursor: isDragDisabled || !imageDTO ? 'default' : 'pointer',
          }}
        >
-          <Image
-            src={thumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
-            fallbackStrategy="beforeLoadOrError"
-            // If we fall back to thumbnail, it feels much snappier than the skeleton...
-            fallbackSrc={imageDTO.thumbnail_url}
-            // fallback={<IAILoadingImageFallback image={imageDTO} />}
-            width={imageDTO.width}
-            height={imageDTO.height}
-            onError={onError}
-            draggable={false}
-            sx={{
-              objectFit: 'contain',
-              maxW: 'full',
-              maxH: 'full',
-              borderRadius: 'base',
-              shadow: isSelected ? 'selected.light' : undefined,
-              _dark: { shadow: isSelected ? 'selected.dark' : undefined },
-              ...imageSx,
-            }}
-          />
-          {withMetadataOverlay && <ImageMetadataOverlay image={imageDTO} />}
-        </Flex>
-      )}
-      {!imageDTO && !isUploadDisabled && (
-        <>
-          <Flex
-            sx={{
-              minH: minSize,
-              w: 'full',
-              h: 'full',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: 'base',
-              transitionProperty: 'common',
-              transitionDuration: '0.1s',
-              color: mode('base.500', 'base.500')(colorMode),
-              ...uploadButtonStyles,
-            }}
-            {...getUploadButtonProps()}
-          >
-            <input {...getUploadInputProps()} />
-            <Icon
-              as={FaUpload}
+          {imageDTO && (
+            <Flex
              sx={{
-                boxSize: 16,
+                w: 'full',
+                h: 'full',
+                position: fitContainer ? 'absolute' : 'relative',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Image
+                src={thumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
+                fallbackStrategy="beforeLoadOrError"
+                // If we fall back to thumbnail, it feels much snappier than the skeleton...
+                fallbackSrc={imageDTO.thumbnail_url}
+                // fallback={<IAILoadingImageFallback image={imageDTO} />}
+                width={imageDTO.width}
+                height={imageDTO.height}
+                onError={onError}
+                draggable={false}
+                sx={{
+                  objectFit: 'contain',
+                  maxW: 'full',
+                  maxH: 'full',
+                  borderRadius: 'base',
+                  shadow: isSelected ? 'selected.light' : undefined,
+                  _dark: { shadow: isSelected ? 'selected.dark' : undefined },
+                  ...imageSx,
+                }}
+              />
+              {withMetadataOverlay && <ImageMetadataOverlay image={imageDTO} />}
+            </Flex>
+          )}
+          {!imageDTO && !isUploadDisabled && (
+            <>
+              <Flex
+                sx={{
+                  minH: minSize,
+                  w: 'full',
+                  h: 'full',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 'base',
+                  transitionProperty: 'common',
+                  transitionDuration: '0.1s',
+                  color: mode('base.500', 'base.500')(colorMode),
+                  ...uploadButtonStyles,
+                }}
+                {...getUploadButtonProps()}
+              >
+                <input {...getUploadInputProps()} />
+                <Icon
+                  as={FaUpload}
+                  sx={{
+                    boxSize: 16,
+                  }}
+                />
+              </Flex>
+            </>
+          )}
+          {!imageDTO && isUploadDisabled && noContentFallback}
+          {!isDropDisabled && (
+            <IAIDroppable
+              data={droppableData}
+              disabled={isDropDisabled}
+              dropLabel={dropLabel}
+            />
+          )}
+          {imageDTO && !isDragDisabled && (
+            <IAIDraggable
+              data={draggableData}
+              disabled={isDragDisabled || !imageDTO}
+              onClick={onClick}
+            />
+          )}
+          {onClickReset && withResetIcon && imageDTO && (
+            <IAIIconButton
+              onClick={onClickReset}
+              aria-label={resetTooltip}
+              tooltip={resetTooltip}
+              icon={resetIcon}
+              size="sm"
+              variant="link"
+              sx={{
+                position: 'absolute',
+                top: 1,
+                insetInlineEnd: 1,
+                p: 0,
+                minW: 0,
+                svg: {
+                  transitionProperty: 'common',
+                  transitionDuration: 'normal',
+                  fill: 'base.100',
+                  _hover: { fill: 'base.50' },
+                  filter: resetIconShadow,
+                },
              }}
            />
-          </Flex>
-        </>
+          )}
+        </Flex>
      )}
-      {!imageDTO && isUploadDisabled && noContentFallback}
-      {!isDropDisabled && (
-        <IAIDroppable
-          data={droppableData}
-          disabled={isDropDisabled}
-          dropLabel={dropLabel}
-        />
-      )}
-      {imageDTO && !isDragDisabled && (
-        <IAIDraggable
-          data={draggableData}
-          disabled={isDragDisabled || !imageDTO}
-          onClick={onClick}
-        />
-      )}
-      {onClickReset && withResetIcon && imageDTO && (
-        <IAIIconButton
-          onClick={onClickReset}
-          aria-label={resetTooltip}
-          tooltip={resetTooltip}
-          icon={resetIcon}
-          size="sm"
-          variant="link"
-          sx={{
-            position: 'absolute',
-            top: 1,
-            insetInlineEnd: 1,
-            p: 0,
-            minW: 0,
-            svg: {
-              transitionProperty: 'common',
-              transitionDuration: 'normal',
-              fill: 'base.100',
-              _hover: { fill: 'base.50' },
-              filter: resetIconShadow,
-            },
-          }}
-        />
-      )}
-    </Flex>
+    </ImageContextMenu>
  );
 };

--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@ -48,6 +48,7 @@ import IAICanvasRedoButton from './IAICanvasRedoButton';
 import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover';
 import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
 import IAICanvasUndoButton from './IAICanvasUndoButton';
+import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';

 export const selector = createSelector(
  [systemSelector, canvasSelector, isStagingSelector],
@ -79,6 +80,7 @@ const IAICanvasToolbar = () => {
  const canvasBaseLayer = getCanvasBaseLayer();

  const { t } = useTranslation();
+  const { isClipboardAPIAvailable } = useCopyImageToClipboard();

  const { openUploader } = useImageUploader();

@ -136,10 +138,10 @@ const IAICanvasToolbar = () => {
      handleCopyImageToClipboard();
    },
    {
-      enabled: () => !isStaging,
+      enabled: () => !isStaging && isClipboardAPIAvailable,
      preventDefault: true,
    },
-    [canvasBaseLayer, isProcessing]
+    [canvasBaseLayer, isProcessing, isClipboardAPIAvailable]
  );

  useHotkeys(
@ -189,6 +191,9 @@ const IAICanvasToolbar = () => {
  };

  const handleCopyImageToClipboard = () => {
+    if (!isClipboardAPIAvailable) {
+      return;
+    }
    dispatch(canvasCopiedToClipboard());
  };

@ -256,13 +261,15 @@ const IAICanvasToolbar = () => {
          onClick={handleSaveToGallery}
          isDisabled={isStaging}
        />
-        <IAIIconButton
-          aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-          tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-          icon={<FaCopy />}
-          onClick={handleCopyImageToClipboard}
-          isDisabled={isStaging}
-        />
+        {isClipboardAPIAvailable && (
+          <IAIIconButton
+            aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
+            tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
+            icon={<FaCopy />}
+            onClick={handleCopyImageToClipboard}
+            isDisabled={isStaging}
+          />
+        )}
        <IAIIconButton
          aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
          tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@ -20,6 +20,7 @@ import UpscaleSettings from 'features/parameters/components/Parameters/Upscale/U
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import {
  setActiveTab,
@ -120,6 +121,9 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
  const toaster = useAppToaster();
  const { t } = useTranslation();

+  const { isClipboardAPIAvailable, copyImageToClipboard } =
+    useCopyImageToClipboard();
+
  const { recallBothPrompts, recallSeed, recallAllParameters } =
    useRecallParameters();

@ -128,7 +132,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
    500
  );

-  const { currentData: image, isFetching } = useGetImageDTOQuery(
+  const { currentData: imageDTO, isFetching } = useGetImageDTOQuery(
    lastSelectedImage ?? skipToken
  );

@ -142,15 +146,15 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {

  const handleCopyImageLink = useCallback(() => {
    const getImageUrl = () => {
-      if (!image) {
+      if (!imageDTO) {
        return;
      }

-      if (image.image_url.startsWith('http')) {
-        return image.image_url;
+      if (imageDTO.image_url.startsWith('http')) {
+        return imageDTO.image_url;
      }

-      return window.location.toString() + image.image_url;
+      return window.location.toString() + imageDTO.image_url;
    };

    const url = getImageUrl();
@ -174,7 +178,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
        isClosable: true,
      });
    });
-  }, [toaster, t, image]);
+  }, [toaster, t, imageDTO]);

  const handleClickUseAllParameters = useCallback(() => {
    recallAllParameters(metadata);
@ -192,31 +196,31 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
    recallSeed(metadata?.seed);
  }, [metadata?.seed, recallSeed]);

-  useHotkeys('s', handleUseSeed, [image]);
+  useHotkeys('s', handleUseSeed, [imageDTO]);

  const handleUsePrompt = useCallback(() => {
    recallBothPrompts(metadata?.positive_prompt, metadata?.negative_prompt);
  }, [metadata?.negative_prompt, metadata?.positive_prompt, recallBothPrompts]);

-  useHotkeys('p', handleUsePrompt, [image]);
+  useHotkeys('p', handleUsePrompt, [imageDTO]);

  const handleSendToImageToImage = useCallback(() => {
    dispatch(sentImageToImg2Img());
-    dispatch(initialImageSelected(image));
-  }, [dispatch, image]);
+    dispatch(initialImageSelected(imageDTO));
+  }, [dispatch, imageDTO]);

-  useHotkeys('shift+i', handleSendToImageToImage, [image]);
+  useHotkeys('shift+i', handleSendToImageToImage, [imageDTO]);

  const handleClickUpscale = useCallback(() => {
    // selectedImage && dispatch(runESRGAN(selectedImage));
  }, []);

  const handleDelete = useCallback(() => {
-    if (!image) {
+    if (!imageDTO) {
      return;
    }
-    dispatch(imageToDeleteSelected(image));
-  }, [dispatch, image]);
+    dispatch(imageToDeleteSelected(imageDTO));
+  }, [dispatch, imageDTO]);

  useHotkeys(
    'Shift+U',
@ -236,7 +240,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
    },
    [
      isUpscalingEnabled,
-      image,
+      imageDTO,
      isESRGANAvailable,
      shouldDisableToolbarButtons,
      isConnected,
@ -268,7 +272,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {

    [
      isFaceRestoreEnabled,
-      image,
+      imageDTO,
      isGFPGANAvailable,
      shouldDisableToolbarButtons,
      isConnected,
@ -283,10 +287,10 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
  );

  const handleSendToCanvas = useCallback(() => {
-    if (!image) return;
+    if (!imageDTO) return;
    dispatch(sentImageToCanvas());

-    dispatch(setInitialCanvasImage(image));
+    dispatch(setInitialCanvasImage(imageDTO));
    dispatch(requestCanvasRescale());

    if (activeTabName !== 'unifiedCanvas') {
@ -299,12 +303,12 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
      duration: 2500,
      isClosable: true,
    });
-  }, [image, dispatch, activeTabName, toaster, t]);
+  }, [imageDTO, dispatch, activeTabName, toaster, t]);

  useHotkeys(
    'i',
    () => {
-      if (image) {
+      if (imageDTO) {
        handleClickShowImageDetails();
      } else {
        toaster({
@ -315,13 +319,20 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
        });
      }
    },
-    [image, shouldShowImageDetails, toaster]
+    [imageDTO, shouldShowImageDetails, toaster]
  );

  const handleClickProgressImagesToggle = useCallback(() => {
    dispatch(setShouldShowProgressInViewer(!shouldShowProgressInViewer));
  }, [dispatch, shouldShowProgressInViewer]);

+  const handleCopyImage = useCallback(() => {
+    if (!imageDTO) {
+      return;
+    }
+    copyImageToClipboard(imageDTO.image_url);
+  }, [copyImageToClipboard, imageDTO]);
+
  return (
    <>
      <Flex
@ -339,7 +350,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
              <IAIIconButton
                aria-label={`${t('parameters.sendTo')}...`}
                tooltip={`${t('parameters.sendTo')}...`}
-                isDisabled={!image}
+                isDisabled={!imageDTO}
                icon={<FaShareAlt />}
              />
            }
@ -369,13 +380,15 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
                </IAIButton>
              )}

-              {/* <IAIButton
-                size="sm"
-                onClick={handleCopyImage}
-                leftIcon={<FaCopy />}
-              >
-                {t('parameters.copyImage')}
-              </IAIButton> */}
+              {isClipboardAPIAvailable && (
+                <IAIButton
+                  size="sm"
+                  onClick={handleCopyImage}
+                  leftIcon={<FaCopy />}
+                >
+                  {t('parameters.copyImage')}
+                </IAIButton>
+              )}
              <IAIButton
                size="sm"
                onClick={handleCopyImageLink}
@ -384,7 +397,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
                {t('parameters.copyImageToLink')}
              </IAIButton>

-              <Link download={true} href={image?.image_url} target="_blank">
+              <Link download={true} href={imageDTO?.image_url} target="_blank">
                <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
                  {t('parameters.downloadImage')}
                </IAIButton>
@ -443,7 +456,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
                  <IAIButton
                    isDisabled={
                      !isGFPGANAvailable ||
-                      !image ||
+                      !imageDTO ||
                      !(isConnected && !isProcessing) ||
                      !facetoolStrength
                    }
@ -474,7 +487,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
                  <IAIButton
                    isDisabled={
                      !isESRGANAvailable ||
-                      !image ||
+                      !imageDTO ||
                      !(isConnected && !isProcessing) ||
                      !upscalingLevel
                    }
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
@ -11,7 +11,7 @@ import SingleSelectionMenuItems from './SingleSelectionMenuItems';
 import { MotionProps } from 'framer-motion';

 type Props = {
-  imageDTO: ImageDTO;
+  imageDTO: ImageDTO | undefined;
  children: ContextMenuProps<HTMLDivElement>['children'];
 };

@ -64,20 +64,25 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
  return (
    <ContextMenu<HTMLDivElement>
      menuProps={{ size: 'sm', isLazy: true }}
-      menuButtonProps={{ bg: 'transparent', _hover: { bg: 'transparent' } }}
-      renderMenu={() => (
-        <MenuList
-          sx={{ visibility: 'visible !important' }}
-          motionProps={motionProps}
-          onContextMenu={handleContextMenu}
-        >
-          {selectionCount === 1 ? (
-            <SingleSelectionMenuItems imageDTO={imageDTO} />
-          ) : (
-            <MultipleSelectionMenuItems />
-          )}
-        </MenuList>
-      )}
+      menuButtonProps={{
+        bg: 'transparent',
+        _hover: { bg: 'transparent' },
+      }}
+      renderMenu={() =>
+        imageDTO ? (
+          <MenuList
+            sx={{ visibility: 'visible !important' }}
+            motionProps={motionProps}
+            onContextMenu={handleContextMenu}
+          >
+            {selectionCount === 1 ? (
+              <SingleSelectionMenuItems imageDTO={imageDTO} />
+            ) : (
+              <MultipleSelectionMenuItems />
+            )}
+          </MenuList>
+        ) : null
+      }
    >
      {children}
    </ContextMenu>
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@ -14,10 +14,11 @@ import { imageToDeleteSelected } from 'features/imageDeletion/store/imageDeletio
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaFolder, FaShare, FaTrash } from 'react-icons/fa';
+import { FaCopy, FaFolder, FaShare, FaTrash } from 'react-icons/fa';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
 import { useRemoveImageFromBoardMutation } from 'services/api/endpoints/boardImages';
 import { useGetImageMetadataQuery } from 'services/api/endpoints/images';
@ -61,6 +62,9 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {

  const { currentData } = useGetImageMetadataQuery(imageDTO.image_name);

+  const { isClipboardAPIAvailable, copyImageToClipboard } =
+    useCopyImageToClipboard();
+
  const metadata = currentData?.metadata;

  const handleDelete = useCallback(() => {
@ -130,11 +134,20 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
    dispatch(imagesAddedToBatch([imageDTO.image_name]));
  }, [dispatch, imageDTO.image_name]);

+  const handleCopyImage = useCallback(() => {
+    copyImageToClipboard(imageDTO.image_url);
+  }, [copyImageToClipboard, imageDTO.image_url]);
+
  return (
    <>
      <MenuItem icon={<ExternalLinkIcon />} onClickCapture={handleOpenInNewTab}>
        {t('common.openInNewTab')}
      </MenuItem>
+      {isClipboardAPIAvailable && (
+        <MenuItem icon={<FaCopy />} onClickCapture={handleCopyImage}>
+          {t('parameters.copyImage')}
+        </MenuItem>
+      )}
      <MenuItem
        icon={<IoArrowUndoCircleOutline />}
        onClickCapture={handleRecallPrompt}
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasCopyToClipboard.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasCopyToClipboard.tsx
@ -4,6 +4,8 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import { canvasCopiedToClipboard } from 'features/canvas/store/actions';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
+import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
+import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaCopy } from 'react-icons/fa';
@ -11,6 +13,7 @@ import { FaCopy } from 'react-icons/fa';
 export default function UnifiedCanvasCopyToClipboard() {
  const isStaging = useAppSelector(isStagingSelector);
  const canvasBaseLayer = getCanvasBaseLayer();
+  const { isClipboardAPIAvailable } = useCopyImageToClipboard();

  const isProcessing = useAppSelector(
    (state: RootState) => state.system.isProcessing
@ -25,15 +28,22 @@ export default function UnifiedCanvasCopyToClipboard() {
      handleCopyImageToClipboard();
    },
    {
-      enabled: () => !isStaging,
+      enabled: () => !isStaging && isClipboardAPIAvailable,
      preventDefault: true,
    },
-    [canvasBaseLayer, isProcessing]
+    [canvasBaseLayer, isProcessing, isClipboardAPIAvailable]
  );

-  const handleCopyImageToClipboard = () => {
+  const handleCopyImageToClipboard = useCallback(() => {
+    if (!isClipboardAPIAvailable) {
+      return;
+    }
    dispatch(canvasCopiedToClipboard());
-  };
+  }, [dispatch, isClipboardAPIAvailable]);
+
+  if (!isClipboardAPIAvailable) {
+    return null;
+  }

  return (
    <IAIIconButton
--- a/invokeai/frontend/web/src/features/ui/hooks/useCopyImageToClipboard.ts
+++ b/invokeai/frontend/web/src/features/ui/hooks/useCopyImageToClipboard.ts
@ -0,0 +1,52 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useCopyImageToClipboard = () => {
+  const toaster = useAppToaster();
+  const { t } = useTranslation();
+
+  const isClipboardAPIAvailable = useMemo(() => {
+    return Boolean(navigator.clipboard) && Boolean(window.ClipboardItem);
+  }, []);
+
+  const copyImageToClipboard = useCallback(
+    async (image_url: string) => {
+      if (!isClipboardAPIAvailable) {
+        toaster({
+          title: t('toast.problemCopyingImage'),
+          description: "Your browser doesn't support the Clipboard API.",
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+      try {
+        const response = await fetch(image_url);
+        const blob = await response.blob();
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [blob.type]: blob,
+          }),
+        ]);
+        toaster({
+          title: t('toast.imageCopied'),
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        });
+      } catch (err) {
+        toaster({
+          title: t('toast.problemCopyingImage'),
+          description: String(err),
+          status: 'error',
+          duration: 2500,
+          isClosable: true,
+        });
+      }
+    },
+    [isClipboardAPIAvailable, t, toaster]
+  );
+
+  return { isClipboardAPIAvailable, copyImageToClipboard };
+};