diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js
index 35744d0..94c63fe 100644
--- a/spec/regexper_spec.js
+++ b/spec/regexper_spec.js
@@ -12,7 +12,8 @@ describe('regexper.js', function() {
'',
'
',
'',
- '',
+ '',
+ '',
'
',
'',
'',
@@ -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');
});
});
diff --git a/src/index.hbs b/src/index.hbs
index d4266d8..21e317f 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -6,8 +6,11 @@
- -
- {{icon "#data-transfer-download"}}Download
+
-
+ {{icon "#data-transfer-download"}}Download SVG
+
+ -
+ {{icon "#data-transfer-download"}}Download PNG
-
{{icon "#link-intact"}}Permalink
diff --git a/src/js/regexper.js b/src/js/regexper.js
index 7444cf4..089e749 100644
--- a/src/js/regexper.js
+++ b/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.download.href = this.buildBlobURL(this.svgContainer.querySelector('.svg').innerHTML);
+ this.downloadSvg.parentNode.style.display = null;
+ 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;
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 08bd9cc..451c28e 100644
--- a/src/sass/main.scss
+++ b/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 .download {
+ &.hide-download-svg .download-svg,
+ &.hide-download-png .download-png {
display: none;
}
}