Adding download PNG link

For #46
This commit is contained in:
Jeff Avallone 2018-02-10 13:05:42 -05:00
parent b4ea423221
commit 19b8d8c71c
4 changed files with 47 additions and 12 deletions

View File

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

View File

@ -6,8 +6,11 @@
<button type="submit">Display</button> <button type="submit">Display</button>
<ul class="inline-list"> <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>
<li class="permalink"> <li class="permalink">
<a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a> <a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>

View File

@ -16,7 +16,8 @@ export default class Regexper {
this.links = this.form.querySelector('ul'); this.links = this.form.querySelector('ul');
this.permalink = this.links.querySelector('a[data-action="permalink"]'); 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'); this.svgContainer = root.querySelector('#regexp-render');
} }
@ -154,19 +155,44 @@ export default class Regexper {
// Update the URLs of the 'download' and 'permalink' links. // Update the URLs of the 'download' and 'permalink' links.
updateLinks() { 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 { 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) { catch(e) {
// Blobs or URLs created from a blob URL don't work in the current // Blobs or URLs created from a blob URL don't work in the current
// browser. Giving up on the download link. // 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. // Create the 'permalink' URL.
if (this.permalinkEnabled) { if (this.permalinkEnabled) {
this.permalink.parentNode.style.display = null; this.permalink.parentNode.style.display = null;

View File

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