From d4e5c0a20984d3a168dd77f70bf79479e3ba6b9c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Dec 2020 21:17:37 +0530
Subject: [PATCH 1/2] Copy Image to Clipboard

---
 src/components/Links.svelte | 74 ++++++++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index 532a699e14..c46022e430 100644
--- a/src/components/Links.svelte
+++ b/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`;
+  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);
   };
-  export const onDownloadSVG = (event) => {
+
+  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">

From ee192ad9ed5710417d655183a01cae2c8161c5cc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 21 Dec 2020 08:27:26 +0530
Subject: [PATCH 2/2] Cleanup

---
 src/components/Links.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index f39d99d6ed..19e239640a 100755
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -11,7 +11,7 @@
   };
 
   const exportImage = (event, exporter) => {
-    var canvas = document.createElement('canvas');
+    const canvas = document.createElement('canvas');
     const svg = document.querySelector('#container svg');
     const box = svg.getBoundingClientRect();
     canvas.width = box.width;
@@ -29,10 +29,10 @@
     context.fillStyle = 'white';
     context.fillRect(0, 0, canvas.width, canvas.height);
 
-    var image = new Image();
+    const image = new Image();
     image.onload = exporter(canvas, context, image);
 
-    console.warn('SVG', getBase64SVG());
+    console.log('SVG', getBase64SVG());
     image.src = `data:image/svg+xml;base64,${getBase64SVG()}`;
     event.stopPropagation();
     event.preventDefault();
@@ -42,7 +42,7 @@
     return () => {
       context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
-      var a = document.createElement('a');
+      const a = document.createElement('a');
       a.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`;
       a.href = canvas
         .toDataURL('image/png')