html2canvas not renderig svg (chartist line)

183 Views Asked by At

I am using chartist to take a screenshot of my page which contains a chart line and save it to the server, the page is displayed correctly but the chart is not rendered. I did some research before posting my issue and understood that html2canvas does not work with svg and that I should convert the svg tag to img using canvg then take my screenshot but none of the answers worked for me .

the code I'm using:

function exportAndSaveCanvas()  {

                    html2canvas($("#captures"), { 
                        allowTaint: true,
                    background:'#fff',
                    onrendered: function(canvas) {         
                    var imgData = canvas.toDataURL('image/jpeg');  

                    var code_firme = $("input[name=code_firme]").val();
                    var id_user = $("input[name=id_user]").val();
                    var page = '1';

                    var url = "{{path('uploadPdfImages')}}";
                        $.ajax({ 
                            type: "POST", 
                            url: url,
                            dataType: 'text',
                            data: {
                                base64data : imgData
                            }
                        });     
                    }
                    });
                } 

i call this action after chart creation using :

chart.on('created', function(data){
         setTimeout(exportAndSaveCanvas(), 13000);
         });

html view :

html view

svg tag

results:

screenshot view

Has anyone successfully converted a Chartist chart line to an image?

0

There are 0 best solutions below