JSFiddle - React, Tailwind, and code Playground
HTML
<a id="myAnchor" download="anAwesomeImage.png">download</a>
JavaScript
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function(){
var ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = this.width*10;
ctx.canvas.height = this.height*10;
ctx.drawImage(this,0,0,ctx.canvas.width, ctx.canvas.height);
ctx.canvas.toBlob(function(blob){
myAnchor.href = URL.createObjectURL(blob);
});
var revokeURL = function(){
// we have to wait that the browser actually prepared the file to download
requestAnimationFrame(function(){
URL.revokeObjectURL(this.href);
this.href=null;
});
this.removeEventListener('click', revokeURL);
};
myAnchor.addEventListener('click', revokeURL);
};
img.src = 'http://lorempixel.com/200/200/';