Temporary local PNG generation

package-lock.json

@@ -1279,6 +1279,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -2000,6 +2005,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
     "css-select": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
@@ -3539,6 +3552,14 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
     },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
     "htmlnano": {
       "version": "0.1.10",
       "resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-0.1.10.tgz",
@@ -7332,6 +7353,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.21.tgz",
       "integrity": "sha512-Aejvyyfhn0zjVeLvXd70h4hrE4zZDx1wfZqia6ekkobLmUZ+vNFQer53B4fu0EjWBSiqApxPejzkO1Znt3joxQ=="
     },
+    "vue-headful": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-headful/-/vue-headful-2.0.1.tgz",
+      "integrity": "sha512-h2G/jXCi2hAx6O3gwWN8uTj1eQlSKNHgvkCVZcokZneGczWCRghAUCFYrOvZQM+F+SyFB3YXqoI62rE0Sc8QsA==",
+      "requires": {
+        "headful": "^1.0.3"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz",
@@ -7347,7 +7376,8 @@
       "resolved": "https://registry.npmjs.org/vue-simple-headful/-/vue-simple-headful-2.2.6.tgz",
       "integrity": "sha512-gV/mE4rJ8O35rJpYtto7uQDIKtwUfZCsuVleeCsNtBAWr2p1BJIsnVOLyRIbOrXRUUzaKtIyjE1cum1JlTuKYg==",
       "requires": {
-        "headful": "^1.0.0"
+        "headful": "^1.0.0",
+        "vue-headful": "^2.0.1"
       }
     },
     "vue-template-compiler": {

package.json

@@ -13,6 +13,7 @@
   "license": " CC-BY-SA-4.0",
   "dependencies": {
     "express": "^4.16.4",
+    "html2canvas": "^1.0.0-alpha.12",
     "interactjs": "^1.3.4",
     "js-yaml": "^3.12.0",
     "nedb-promises": "^3.0.2",

src/Editor.vue

@@ -56,6 +56,7 @@
 
 <script>
  import yaml from 'js-yaml';
+ import html2canvas from 'html2canvas';
  import Deck from './Deck.vue';
  import Loader from './Loader.vue';
 
@@ -110,23 +111,11 @@
      },
 
      upload() {
-       // POST the inputed json to the server
-       this.uploading = true;
-       fetch('/upload', {
-         method: 'post',
-         headers: {'Content-Type': 'application/json'},
-         body: JSON.stringify({
-           deck: this.deckInfo,
-           _id: this.deckID === 'new' ? undefined : this.deckID,
-           dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
-           css: document.styleSheets[0].href,
-         })})
-         .then(r => r.json())
-         .then(j => {
-           this.$router.replace('/edit/' + j.id);
-           this.uploading = false;
-         })
-         .catch(err => console.log('Failed to upload' + err));
+       let node = this.$refs.deck.$el;
+
+       html2canvas(node, {scale: 2, width: node.scrollWidth,
+                          backgroundColor: 'black'})
+         .then(canvas => document.body.appendChild(canvas));
      },
    },
  }