score:9

Accepted answer

here is how i solve it :

  • use google canvg it takes a url to a svg file or the text of an svg file, parses it in javascript, and renders the result on a canvas element.

  • render your chart svg to the canvas using 

     canvg(document.getelementbyid('canvas'),getsvg());

  • convert what you have in the canvas to image 

      var canvas = document.getelementbyid("canvas") ; 
  var img = canvas.todataurl("image/png"); //img is data:image/png;base64
   img = img.replace('data:image/png;base64,', '');

  • render your image to a hidden field 

      $("hidden field").val(img) ;

  • to convert this string to byte array do 

     dim imagefile() as byte = convert.frombase64string(your hidden field .value)

update

get the highcharts svg

  • use the chart.getsvg() method

highcharts api

jsfiddle example

  • or simply use $(your svg).html()

score:1

you can directly get base64 from http://export.highcharts.com by passing required parameter in request.

let chartdata = {
        infile: chart_data,
        b64: true // bool, set to true to get base64 back instead of binary.
        width: 600,
        constr : "chart"
    }

you can use below snippet to get base64

fetch("https://export.highcharts.com/", {
  "headers": {
    "content-type": "application/json",
  },
  "body": "{\"infile\":\"{\\n    \\\"xaxis\\\": {\\n        \\\"categories\\\": [\\n            \\\"jan\\\",\\n            \\\"feb\\\",\\n            \\\"mar\\\",\\n            \\\"apr\\\",\\n            \\\"may\\\",\\n            \\\"jun\\\",\\n            \\\"jul\\\",\\n            \\\"aug\\\",\\n            \\\"sep\\\",\\n            \\\"oct\\\",\\n            \\\"nov\\\",\\n            \\\"dec\\\"\\n        ]\\n    },\\n    \\\"series\\\": [\\n        {\\n            \\\"data\\\": [1,3,2,4],\\n            \\\"type\\\": \\\"line\\\"\\n        },\\n        {\\n            \\\"data\\\": [5,3,4,2],\\n            \\\"type\\\":\\\"line\\\"\\n        }\\n    ]\\n}\\n\",\"width\":600,\"constr\":\"chart\",\"b64\":true}",
  "method": "post",
  "mode": "cors"
}).then(function(response) {
    // the response is a response instance.
    return response.text();
  }).then(function(data) {
    console.log(data);  //  base64 data
  }).catch(function(err) { console.log(err);})

score:3

first, see the highcharts documentation on exporting files. this will give you the string to the image url you want.

exporting: http://www.highcharts.com/ref/#exporting

use an http request (with ajax, for instance) to get the file binary content (jpg/png) and transfer it to a base64 encoding library like this one:

base64: http://www.webtoolkit.info/javascript-base64.html

enjoy and good luck!


Related Query

More Query from same tag