feat: add copy image in share menu (#2484)

<img width="233" alt="Screenshot 2023-02-03 at 12 11 46"
src="https://user-images.githubusercontent.com/70191398/216510761-3e5013a3-5346-45d4-92e5-d913d035f1bc.png">

invokeai/frontend/dist/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InvokeAI - A Stable Diffusion Toolkit</title>
     <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-    <script type="module" crossorigin src="./assets/index.92e1e2e8.js"></script>
+    <script type="module" crossorigin src="./assets/index.2a9ecaa6.js"></script>
     <link rel="stylesheet" href="./assets/index.8badc8b4.css">
     <script type="module">try{import.meta.url;import("_").catch(()=>1);}catch(e){}window.__vite_is_modern_browser=true;</script>
     <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
@@ -18,6 +18,6 @@
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
     <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-dde3a68a.js"></script>
-    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-eaf1c1d4.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-8f3bb5f8.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

invokeai/frontend/dist/locales/options/en.json

@@ -46,6 +46,7 @@
   "sendTo": "Send to",
   "sendToImg2Img": "Send to Image to Image",
   "sendToUnifiedCanvas": "Send To Unified Canvas",
+  "copyImage": "Copy Image",
   "copyImageToLink": "Copy Image To Link",
   "downloadImage": "Download Image",
   "openInViewer": "Open In Viewer",

invokeai/frontend/public/locales/options/en.json

@@ -46,6 +46,7 @@
   "sendTo": "Send to",
   "sendToImg2Img": "Send to Image to Image",
   "sendToUnifiedCanvas": "Send To Unified Canvas",
+  "copyImage": "Copy Image",
   "copyImageToLink": "Copy Image To Link",
   "downloadImage": "Download Image",
   "openInViewer": "Open In Viewer",

invokeai/frontend/src/features/gallery/components/CurrentImageButtons.tsx

@@ -121,6 +121,22 @@ const CurrentImageButtons = () => {
     dispatch(setActiveTab('img2img'));
   };
 
+  const handleCopyImage = async () => {
+    if (!currentImage) return;
+
+    const blob = await fetch(currentImage.url).then((res) => res.blob());
+    const data = [new ClipboardItem({ [blob.type]: blob })];
+
+    await navigator.clipboard.write(data);
+
+    toast({
+      title: t('toast:imageCopied'),
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
+  };
+
   const handleCopyImageLink = () => {
     navigator.clipboard
       .writeText(
@@ -391,6 +407,14 @@ const CurrentImageButtons = () => {
             >
               {t('options:sendToUnifiedCanvas')}
             </IAIButton>
+
+            <IAIButton
+              size={'sm'}
+              onClick={handleCopyImage}
+              leftIcon={<FaCopy />}
+            >
+              {t('options:copyImage')}
+            </IAIButton>
             <IAIButton
               size={'sm'}
               onClick={handleCopyImageLink}