From 8431f4690930255e2da530e405b0e59969d5ba32 Mon Sep 17 00:00:00 2001
From: Martin Hofmann <martin@martinhofmann.com>
Date: Fri, 23 Aug 2019 14:47:26 -0700
Subject: [PATCH] adds gatsby-node config

---
 gatsby-node.js                       | 14 ++++++++++++++
 src/components/boxModelVisualizer.js | 20 ++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/gatsby-node.js b/gatsby-node.js
index 2f42665..dbffcf5 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,3 +5,17 @@
  */
 
 // You can delete this file if you're not using it
+exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
+  if (stage === "build-html") {
+    actions.setWebpackConfig({
+      module: {
+        rules: [
+          {
+            test: /html2canvas/,
+            use: loaders.null(),
+          },
+        ],
+      },
+    })
+  }
+}
\ No newline at end of file
diff --git a/src/components/boxModelVisualizer.js b/src/components/boxModelVisualizer.js
index dae44e8..405440f 100644
--- a/src/components/boxModelVisualizer.js
+++ b/src/components/boxModelVisualizer.js
@@ -110,11 +110,31 @@ function BoxModelVisualizer({ margin, border, padding, element }) {
   }, [])
 
   function savePNG() {
+    const boxModel = document.getElementById("box-model")
 
+    html2canvas(boxModel).then(function(canvas) {
+      saveAs(canvas.toDataURL(), 'box-model.png');
+    }) 
   }
 
   function saveAs(uri, filename) {
+    let link = document.createElement('a');
 
+    if (typeof link.download === 'string') {
+      link.href = uri;
+      link.download = filename;
+
+      //Firefox requires the link to be in the body
+      document.body.appendChild(link);
+
+      //simulate click
+      link.click();
+
+      //remove the link when done
+      document.body.removeChild(link);
+    } else {
+      window.open(uri);
+    }
   }
 
   function truthyHelper(val) {