Create Phantomjs export server to convert highchart to image base64 string

Question

I searched a lot around the web and previous stackoverflow questions and answers but i can't create a image base64 string.

1. First I download phantomjs 1.9.7.0

2. I start phantomjs as described here.

   phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003
   

3. I create html page and post like :

   $(document).ready(function() {
       $("#Button1").click(function() {
           var options = {
               exporting: {
               url: 'http://127.0.0.1:3003'
               },
               xAxis: {
                   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
               },
               series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]
               };
               var obj = {},
               exportUrl = options.exporting.url;
               obj.options = JSON.stringify(options);
               obj.type = 'image/png';
               obj.async = true;
   
               $.ajax({
                   type: 'post',
                   url: exportUrl,
                   data: obj,
                   success: function(data) {
                       var imgContainer = $("#imgContainer");
                       $('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
                   },
                   error: function(data) {
                       document.write(JSON.stringify(data));
                   }
   
               });
           });
   
       });
   

   and it always has error in (alert(JSON.stringify(data))):

   {"readyState":0,"responseText":"","status":0,"statusText":"error"}
   

Could you please help me?

Answer 1

Try that solution:

$('#export').click(function () {
    var options = {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    };

    var obj = {
        async: true,
        infile: JSON.stringify(options) // options must be a string, and use infile, not options, like described in docs
    };

    $.ajax({
        type: 'POST',
        data: JSON.stringify(obj), // the same for data property !
        url: 'http://127.0.0.1:3003/',
        success: function (data) {
            $('#imgContainer').html('<img src="' + data + '"/>');
        }
    });
});

Edit:

If you are trying to get image from different domain, don't forget about CORS:

render(params, function (result) {
    response.statusCode = 200;
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    response.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    response.write(result);
    response.close();
});