<canvas id="demo" width="500" height="400"></canvas>
<script>
var ctx = demo.getContext('2d'),
w = demo.width,
h = demo.height,
img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, w, h);
download(demo, 'test.png');
}
img.crossOrigin = 'anonymous';
img.src = 'http://i.imgur.com/bbQ7uxV.jpg';
/// download canvas as image
function download(canvas, filename) {
if (typeof filename !== 'string' || filename.trim().length === 0)
filename = 'Untitled';
var lnk = document.createElement('a'),
e;
lnk.download = filename;
lnk.href = canvas.toDataURL();
if (document.createEvent) {
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
lnk.fireEvent("onclick");
}
}
</script>
5 минут гугла и можно найти множество решений. canvas, base64
