How to send Chart exported PNG to Server ?

[Surya]

Currently I am using ejs-chart. When ever user clicks on export button I want to send the chart as base64 image to server with out showing download dialogue. I know its possible using ej-chart(Essential Js-1) export setting.action and mode but I want the same feature in ejs-chart(EJ-2) ? 

[Srihari Muthukaruppan]

Hi Ashok, 

 

Greetings from Syncfusion support. 

 

We have analyzed your query. Based on your requirement we have prepared a sample for your reference. In which we have converted our chart svg into an base64 image on button click as shown in the code snippet without having to export the chart. Please find the sample and code snippet below for your reference. 

 

Sample: https://stackblitz.com/edit/angular-m3krz4-vfc6ra?file=app.component.ts 

 

CodeSnippet: 

// add your additional code here 

public onClick(e: Event): void { 

    var svg = document.querySelector("#charts_svg"); 

    var svgData = new XMLSerializer().serializeToString(svg); 

    var img = document.createElement("img"); 

    img.setAttribute( 

      "src", 

      "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) 

    ); 

    console.log(img.src); 

  } 

// add your additional code here 

 

  

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Surya]

Thanks for the help Srihari Muthukaruppan.

I want the image in PNG/JPEG format not svg.

[Srihari Muthukaruppan]

Hi Ashok, 

 

Sorry for the inconvenience caused. 

 

We have analyzed your query. Based on your requirement we have converted our chart component into base64 image png format as data url which can be passed to server. Please find the sample, code snippet and screenshot below for your reference. 

 

Sample: https://stackblitz.com/edit/angular-m3krz4-vfc6ra?file=app.component.ts 

 

Code Snippet: 

// add your additional code here 

public onClick(e: Event): void { 

    var imagedata; 

    var svg = document.querySelector("#charts_svg"); 

    var svgData = new XMLSerializer().serializeToString(svg); 

    var svgData = new XMLSerializer().serializeToString(svg); 

    var canvas = document.createElement("canvas"); 

    document.body.appendChild(canvas); 

    var svgSize = svg.getBoundingClientRect(); 

    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(svgData)); 

    img.onload = function() { 

      ctx.drawImage(img, 0, 0); 

      var imagedata = canvas.toDataURL("image/png"); 

      console.log(imagedata); 

      canvas.remove(); 

    }; 

  } 

// add your additional code here 

 

 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Surya]

Thanks its worked for me

[Srihari Muthukaruppan]

Hi Ashok, 

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M 

[Hari Chouhan]

Hi SF, Do we have same example in REACT ?

[Durga Gopalakrishnan]

Hi Hari,

We have prepared sample to get base64 string of chart image in react platform. Please check with the below snippet and sample.

<ChartComponent id='charts' ref={chart => this.chartInstance = chart}> </ChartComponent>

onClick(e) {

        var svg = document.querySelector("#charts_svg");

        var svgData = new XMLSerializer().serializeToString(svg);

        var canvas = document.createElement("canvas");

        document.body.appendChild(canvas);

        var svgSize = svg.getBoundingClientRect();

        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(svgData));

        img.onload = function() {

        ctx.drawImage(img, 0, 0);

        var imagedata = canvas.toDataURL("image/png");

        console.log(imagedata); // printed base64 in console

        canvas.remove();

        };

    }

Sample : https://stackblitz.com/edit/react-bqzadk

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.