html2canvas generated image not picking svg in chart

Question

I have used svg icons in my app & used svg to draw charts too.When I generate image using html2canvas all the svgs are ignored & image is generated without all svgs.

I am using below function to generate image.

function svgToCanvas (targetElem) {
        var nodesToRecover = [];
        var nodesToRemove = [];

        var svgElem = targetElem.find('svg');

        svgElem.each(function(index, node) {
            var parentNode = node.parentNode;
            var svg = parentNode.innerHTML;

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

            canvg(canvas, svg);

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });

        html2canvas(targetElem, {
            allowTaint: true,
            onrendered: function(canvas) {
                // var ctx = canvas.getContext('2d');
                // ctx.webkitImageSmoothingEnabled = false;
                // ctx.mozImageSmoothingEnabled = false;
                // ctx.imageSmoothingEnabled = false;

                var img_PNG = Canvas2Image.saveAsPNG(canvas);
            }
        });
    }

This function is called like this svgToCanvas($("#app-container"));

Thanks in advance.

score 6 · Accepted Answer · answered Dec 03 '15 at 07:00

I forgot to answer this question.Someone up vote my question so came into mind.

Actually html2canvas is converting to image but it was not picking style of the SVG as it was writtedn in different css file.So if you want to get styles of SVG in image you have to give style inline within tags.Then you will get complete and colorful image.

Hope this will help you.

score 0 · Answer 2 · edited May 23 '17 at 12:26

JavaScript passes objects by reference (see Does Javascript pass by reference? or Is JavaScript a pass-by-reference or pass-by-value language? for explanations) which means that the SVGs are edited out by parentNode.removeChild(node); insides the svgElem.each loop before html2canvas gets to work on them.

However, changing that might not help - telling from my experience html2canvas doesn't render SVG. That can be done manually - here's an answer with source code which might help you achieve that manually: Styling errors when converting inline SVG to png

html2canvas generated image not picking svg in chart

2 Answers2