Copy Image to Clipboard

src/components/Links.svelte

@@ -1,14 +1,10 @@
 <script>
-  import { codeErrorStore } from '../code-error-store.js';
   import { link } from 'svelte-spa-router';
   import { Base64 } from 'js-base64';
-  import { onMount } from 'svelte';
   import moment from 'moment';
   import { codeStore } from '../code-store.js';
 
-  onMount(async () => {});
-
-  export const onDownloadPNG = (event) => {
+  const exportImage = (event, exporter) => {
     var canvas = document.createElement('canvas');
     const container = document.getElementById('container');
     const svg = document.querySelector('#container svg');
@@ -29,7 +25,18 @@
     context.fillRect(0, 0, canvas.width, canvas.height);
 
     var image = new Image();
-    image.onload = function () {
+    image.onload = exporter(canvas, context, image);
+
+    console.warn('SVG', container.innerHTML);
+    image.src = `data:image/svg+xml;base64,${Base64.encode(
+      container.innerHTML
+    )}`;
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  const downloadImage = (canvas, context, image) => {
+    return () => {
       context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
       var a = document.createElement('a');
@@ -39,18 +46,35 @@
         .replace('image/png', 'image/octet-stream');
       a.click();
     };
-
-    console.warn('SVG', container.innerHTML);
-    image.src = `data:image/svg+xml;base64,${Base64.encode(
-      container.innerHTML
-    )}`;
-    event.stopPropagation();
-    event.preventDefault();
-    event.target.download = `mermaid-diagram-${moment().format(
-      'YYYYMMDDHHmmss'
-    )}.png`;
   };
-  export const onDownloadSVG = (event) => {
+
+  const clipboardCopy = (canvas, context, image) => {
+    return () => {
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+
+      canvas.toBlob((blob) => {
+        try {
+          navigator.clipboard.write([
+            new ClipboardItem({
+              [blob.type]: blob,
+            }),
+          ]);
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    };
+  };
+
+  const onCopyClipboard = (event) => {
+    exportImage(event, clipboardCopy);
+  };
+
+  const onDownloadPNG = (event) => {
+    exportImage(event, downloadImage);
+  };
+
+  const onDownloadSVG = (event) => {
     console.log('event', event.target);
     const container = document.getElementById('container');
     event.target.href = `data:image/svg+xml;base64,${Base64.encode(
@@ -61,7 +85,8 @@
     )}.svg`;
     console.log('event', event);
   };
-  export const onCopyMarkdown = (event) => {
+
+  const onCopyMarkdown = (event) => {
     event.target.select();
     document.execCommand('Copy');
   };
@@ -135,6 +160,16 @@
 </style>
 
 <div id="links">
+  <button class="button-style">
+    <a class="link-style" href={url} download="" on:click={onCopyClipboard}>
+      Copy Image
+    </a>
+  </button>
+  <button class="button-style">
+    <a class="link-style" href={url} download="" on:click={onDownloadPNG}>
+      Download PNG
+    </a>
+  </button>
   <button class="button-style">
     <a class="link-style" href={url} use:link>Link to view</a>
   </button>
@@ -149,11 +184,6 @@
   <button class="button-style">
     <a class="link-style" href={svgUrl}>Link to SVG</a>
   </button>
-  <button class="button-style">
-    <a class="link-style" href={url} download="" on:click={onDownloadPNG}>
-      Download PNG
-    </a>
-  </button>
   (markdown is base64 encoded for these urls)
 </div>
 <div id="copy-section">