cancel
Showing results for 
Search instead for 
Did you mean: 

Getting screenshots of SAPUI5 pie chart

Former Member
0 Kudos

Hi all,

I have been trying to get a screenshot of a pie chart with html2canvas (https://html2canvas.hertzen.com/) library but I did not manage to get the png that I need. I have tried this:


        var vizFrame = this.getView().byId("idVizFrame");

        var vizFrameDOM = vizFrame.oParent.$();

            html2canvas(vizFrameDOM, {

                onrendered: function (canvas) {

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

                       var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");

                       var a = document.createElement('a');

                       a.setAttribute("download", "your_pic_name.png");

                       a.setAttribute("href", newData);

                       a.click();

                }

            });

and I got an empty image. Could anybody tell me what could be the reason and provide the solution ?

Thanks in advance.

Kerem

Accepted Solutions (1)

Accepted Solutions (1)

former_member227918
Active Contributor

Hello Karem,

probably html2canvas is not working properly with your ui5 setup and canvas is not coming properly,

OR

Pie chart rendered element is not getting supported by html2canvas.

you can try below way to convert into image.

onDownloadImage: function() {

    var vizFrame = this.getView().byId("idVizFrame");

    var svg = vizFrame.getDomRef().getElementsByTagName("svg")[0];

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

    canvas.setAttribute("width", svg.clientWidth);

    canvas.setAttribute("height", svg.clientHeight);

    var context = canvas.getContext("2d");

    var imageObj = new Image();

    imageObj.onload = function() {

        context.drawImage(imageObj, 0, 0);

        var a = document.createElement('a');

        a.setAttribute("download", "pic_name.png");

        a.setAttribute("href", canvas.toDataURL());

        a.click();

    };

    imageObj.width = svg.clientWidth;

    imageObj.height = svg.clientHeight;

    imageObj.src = "data:image/svg+xml," + jQuery.sap.encodeURL(

        svg.outerHTML.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"'));

}

example:

https://jsfiddle.net/Akhilesh_U/x5gs51us/

Regards,

Akhilesh

Former Member
0 Kudos

Hi Akhilesh, this solution worked for me thanks a lot.

Regards,

Kerem

Answers (0)