CODEWITHSUNDEEP
javascriptjqueryhtmlsvghtml2canvas
Desert Rose
Desert Rose

Reputation: 3424

html2canvas generated image not picking svg in chart

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.

Upvotes: 1

Views: 4097

Answers (2)

Desert Rose
Desert Rose

Reputation: 3424

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.

Upvotes: 6

HumanInDisguise
HumanInDisguise

Reputation: 1455

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

Upvotes: 0

Related Questions