Image Export

BuchholzTim · Jan 21, 2021 · 6f46882 · 6f46882
1 parent 66616db
commit 6f46882
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/frontend/components/fabricjs.vue b/frontend/components/fabricjs.vue
@@ -62,6 +62,23 @@ export default {
       message: 'Joining Whiteboard',
     });
 
+    this.$nuxt.$on(customEvents.canvasTools.exportImage, (event) => {
+      // This returns the current content as base64-Encoded PNG
+      const canvasAsImageB64 = this.canvas.toDataURL();
+
+      // Downloading BLOBS is easy. So we have to decode the base64 to a BLOB
+      // The Fetch-API is the most simple way to do this
+      fetch(canvasAsImageB64)
+        .then((res) => res.blob()).then((blob) => {
+          const downloadLink = document.createElement('a');
+          downloadLink.href = URL.createObjectURL(blob);
+          downloadLink.setAttribute('download', `canvas_${this.canvasId}.png`);
+          downloadLink.click();
+          URL.revokeObjectURL(downloadLink.href);
+          logger(this, blob);
+        });
+    });
+
     this.canvas = new fabric.Canvas('canvas');
 
     // First render in Nuxt is Server-Side, so there is no reference to Window

diff --git a/frontend/components/panel/WhiteBoardControls.vue b/frontend/components/panel/WhiteBoardControls.vue
@@ -76,7 +76,11 @@
                   >
                 </li>
                 <li class="dropdown--menu--item">
-                  <a id="export-image" href="#" class="dropdown--menu--link"
+                  <a
+                    id="export-image"
+                    href="#"
+                    class="dropdown--menu--link"
+                    @click="exportImage"
                     >Export as image</a
                   >
                 </li>
@@ -255,11 +259,7 @@
           </li>
 
           <!-- Text -->
-          <li
-            id="toolbar-item-text"
-            class="tools--item"
-            @click="toggleTextBox"
-          >
+          <li id="toolbar-item-text" class="tools--item" @click="toggleTextBox">
             <div class="tools--item--button">
               <i class="fas fa-font"></i>
             </div>
@@ -394,6 +394,9 @@ export default {
   },
 
   methods: {
+    exportImage() {
+      this.$nuxt.$emit(customEvents.canvasTools.exportImage);
+    },
     getInviteLink() {
       modalHelper.showInviteModal();
     },

diff --git a/frontend/utils/customEvents.js b/frontend/utils/customEvents.js
@@ -1,5 +1,6 @@
 export default {
   canvasTools: {
+    exportImage: 'EventTrigger_ExportCanvasAsImage',
     stickyNote: 'EventTrigger_StickyNote',
     rectangle: 'EventTrigger_Rectangle',
     textbox: 'EventTrigger_Textbox',