4 different ways to save a Highcharts chart as a PNG (with and without a server)

gistfile1.js

// Method 1: simply use Highcharts built-in functionality (SVG -> Highcharts server -> PNG)
// Downside: won't work in webview native apps that don't handle the form response
highcharts.exportChart({
    filename: filename
});

gistfile2.js

// Method 2: Send chart config to Highcharts export server (JSON -> Highcharts server -> PNG URL)
var data = {
    options: JSON.stringify(chartConfig),
    filename: filename,
    type: 'image/png',
    async: true
};

var exportUrl = 'http://export.highcharts.com/';
$.post(exportUrl, data, function(data) {
    var url = exportUrl + data;
    window.open(url);
});

gistfile3.js

// Method 3: simple phantomjs server to create a PNG from the svg data (SVG -> phantomjs -> PNG)
// see https://github.com/elasticsales/flask-common/blob/master/flask_common/png.js
var svg = $chartEl.find('svg')[0];
var svgSize = svg.getBoundingClientRect();
var svgData = new XMLSerializer().serializeToString( svg );
var url = '/render_png/?' + $.param({
    svg: svgData,
    filename: filename
});

gistfile4.js

// Method 4: client-side-only solution (SVG -> Canvas -> PNG)
// Problem: has a security error in Safari
var canvas = document.createElement('canvas');
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = canvas.getContext('2d');

var img = document.createElement('img');
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))));
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    window.open(canvas.toDataURL('image/png'));
};