adds gatsby-node config

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(),
+          },
+        ],
+      },
+    })
+  }
+}

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) {