Adding download PNG link

For #46

spec/regexper_spec.js

@@ -12,7 +12,8 @@ describe('regexper.js', function() {
         '<input type="text" id="regexp-input">',
         '<ul class="example">',
           '<ul><a href="#" data-action="permalink"></a></ul>',
-          '<ul><a href="#" data-action="download"></a></ul>',
+          '<ul><a href="#" data-action="download-svg"></a></ul>',
+          '<ul><a href="#" data-action="download-png"></a></ul>',
         '</ul>',
       '</form>',
       '<div id="error"></div>',
@@ -312,7 +313,7 @@ describe('regexper.js', function() {
 
       it('sets the download link href', function() {
         this.regexper.updateLinks();
-        expect(this.regexper.download.href).toEqual('http://example.com/blob');
+        expect(this.regexper.downloadSvg.href).toEqual('http://example.com/blob');
       });
 
     });

src/index.hbs

@@ -6,8 +6,11 @@
         <button type="submit">Display</button>
 
         <ul class="inline-list">
-          <li class="download">
+          <li class="download-svg">
-            <a href="#" class="inline-icon" data-action="download" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download</a>
+            <a href="#" class="inline-icon" data-action="download-svg" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download SVG</a>
+          </li>
+          <li class="download-png">
+            <a href="#" class="inline-icon" data-action="download-png" download="image.png" type="image/png">{{icon "#data-transfer-download"}}Download PNG</a>
           </li>
           <li class="permalink">
             <a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>

src/js/regexper.js

@@ -16,7 +16,8 @@ export default class Regexper {
 
     this.links = this.form.querySelector('ul');
     this.permalink = this.links.querySelector('a[data-action="permalink"]');
-    this.download = this.links.querySelector('a[data-action="download"]');
+    this.downloadSvg = this.links.querySelector('a[data-action="download-svg"]');
+    this.downloadPng = this.links.querySelector('a[data-action="download-png"]');
 
     this.svgContainer = root.querySelector('#regexp-render');
   }
@@ -154,19 +155,44 @@ export default class Regexper {
 
   // Update the URLs of the 'download' and 'permalink' links.
   updateLinks() {
-    let classes = _.without(this.links.className.split(' '), ['hide-download', 'hide-permalink']);
+    let classes = _.without(this.links.className.split(' '), ['hide-download-svg', 'hide-permalink']);
+    let svg = this.svgContainer.querySelector('.svg');
 
-    // Create the 'download' image URL.
+    // Create the SVG 'download' image URL.
     try {
-      this.download.parentNode.style.display = null;
+      this.downloadSvg.parentNode.style.display = null;
-      this.download.href = this.buildBlobURL(this.svgContainer.querySelector('.svg').innerHTML);
+      this.downloadSvg.href = this.buildBlobURL(svg.innerHTML);
     }
     catch(e) {
       // Blobs or URLs created from a blob URL don't work in the current
       // browser. Giving up on the download link.
-      classes.push('hide-download');
+      classes.push('hide-download-svg');
     }
 
+    //Create the PNG 'download' image URL.
+    try {
+      let canvas = document.createElement('canvas');
+      let context = canvas.getContext('2d');
+      let loader = new Image;
+
+      loader.width = canvas.width = Number(svg.querySelector('svg').getAttribute('width'));
+      loader.height = canvas.height = Number(svg.querySelector('svg').getAttribute('height'));
+      loader.onload = () => {
+        try {
+          context.drawImage(loader, 0, 0, loader.width, loader.height);
+          canvas.toBlob(blob => {
+            window.pngBlob = blob;
+            this.downloadPng.href = URL.createObjectURL(window.pngBlob);
+            this.links.className = this.links.className.replace(/\bhide-download-png\b/, '');
+          }, 'image/png');
+        }
+        catch(e) {}
+      };
+      loader.src = 'data:image/svg+xml,' + encodeURIComponent(svg.innerHTML);
+      classes.push('hide-download-png');
+    }
+    catch(e) {}
+
     // Create the 'permalink' URL.
     if (this.permalinkEnabled) {
       this.permalink.parentNode.style.display = null;

src/sass/main.scss

@@ -265,9 +265,14 @@ header {
         display: inline-block;
       }
 
+      &.hide-download-png.hide-permalink .download-svg:after,
+      &.hide-permalink .download-png:after {
+        display: none;
+      }
+
       &.hide-permalink .permalink,
-      &.hide-permalink .download::after,
+      &.hide-download-svg .download-svg,
-      &.hide-download .download {
+      &.hide-download-png .download-png {
         display: none;
       }
     }