tim545 · September 14, 2017 00:06 · Aug 22, 2014
diff --git a/gistfile1.js b/gistfile1.js
@@ -0,0 +1,5 @@
+// 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
+});
diff --git a/gistfile2.js b/gistfile2.js
@@ -0,0 +1,13 @@
+// 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);
+});
diff --git a/gistfile3.js b/gistfile3.js
@@ -0,0 +1,9 @@
+// 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
+});
diff --git a/gistfile4.js b/gistfile4.js
@@ -0,0 +1,13 @@
+// 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'));
+};
No results found