crowbar + png

chart-download.js

// based off of:
// 		https://github.com/andyreagan/phantom-crowbar/blob/master/phantom-crowbar.js
// 		https://github.com/NYTimes/svg-crowbar/blob/gh-pages/svg-crowbar-2.js
// and for a blog post about converting to png etc client side see 
//		http://willkoehler.net/2014/11/07/client-side-solution-for-downloading-highcharts-charts-as-images.html
function crowbar(svg) {
	var source = '',
    	doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
     	prefix = {
			xmlns: 'http://www.w3.org/2000/xmlns/',
			xlink: 'http://www.w3.org/1999/xlink',
			svg: 'http://www.w3.org/2000/svg'
	    };

    var styles = '',
    	styleSheets = document.styleSheets;

    for (var i=0; i < styleSheets.length; i++) {
		processStyleSheet(styleSheets[i]);
    }

    function processStyleSheet(ss) {
		if (ss.cssRules) {
		    for (var i = 0; i < ss.cssRules.length; i++) {
				var rule = ss.cssRules[i];
				styles += '\n' + rule.cssText;
		    }
		}
    }

    svg.setAttribute('version', '1.1');

    var defsEl = document.createElement('defs');
    svg.insertBefore(defsEl, svg.firstChild); 
    
    var styleEl = document.createElement('style')
    defsEl.appendChild(styleEl);
    styleEl.setAttribute('type', 'text/css');
    
    svg.removeAttribute('xmlns');
    svg.removeAttribute('xlink');
    
    if (!svg.hasAttributeNS(prefix.xmlns, 'xmlns')) {
		svg.setAttributeNS(prefix.xmlns, 'xmlns', prefix.svg);
    }
    if (!svg.hasAttributeNS(prefix.xmlns, 'xmlns:xlink')) {
		svg.setAttributeNS(prefix.xmlns, 'xmlns:xlink', prefix.xlink);
    }
    
    var svgxml = (new XMLSerializer()).serializeToString(svg)
		.replace('</style>', '<![CDATA[' + styles + ']]></style>');
    
    source += doctype + svgxml;

    return unescape(encodeURIComponent(source));
}

function chart_download(svg, format) {
	var source = crowbar(svg);
	
	var filename = 'chart';
    if (svg.id) filename = svg.id;
    else if (svg.class) filename = svg.class;

    if (format == 'svg') {
    	var url = window.URL.createObjectURL(new Blob([source], { 'type' : 'text\/xml' }));
    } else if (format == 'png') {
		var canvas = document.createElement('canvas');

		var export_width = 1000,
			scaling_factor = export_width / svg.width.baseVal.value,
			export_height = svg.height.baseVal.value * scaling_factor;

		canvas.height = export_height;
		canvas.width = export_width;

		var img = document.createElement('img');
		var image64 = 'data:image/svg+xml;base64,' + window.btoa(source);
		img.src = image64;

		canvas.getContext('2d').drawImage(img, 0, 0, export_width, export_height);

		var url = canvas.toDataURL('image/png');
    };	

    var a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('download', filename + '.' + format);
    a.setAttribute('href', url);
    a.style['display'] = 'none';
    a.click();
    a.remove();

    setTimeout(function() {
      window.URL.revokeObjectURL(url);
    }, 10);
}