html2canvas generated image not picking svg in chart

Desert Rose

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.

Desert Rose

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Html2Canvas then Canvas2Image cutting the generated image

From Dev

SVG to Canvas conversion: generated image is empty

From Dev

Text alignment changes on exporting d3js chart svg as png using html2canvas

From Dev

PHP Generated SVG as background image

From Dev

html2canvas not capturing image

From Dev

html2canvas crop image on click

From Dev

html2canvas not taking capture of image

From Dev

html2canvas capturing div image

From Dev

html2canvas crop image on click

From Dev

html2canvas and jsPDF : send generated pdf as email attachment

From Dev

HTML Div convert into image with background image Html2canvas

From Dev

Saving canvas with background image to server with html2canvas

From Dev

HTML2Canvas - get created canvas image URI

From Dev

convert html with highcharts graph to image using html2canvas

From Dev

How to save html2canvas image into System Folder in jquery

From Dev

Codemirror & html2canvas: Save iFrame as Image

From Dev

html2canvas doesn't get image full height

From Dev

Saving Morris charts to image using HTML2CANVAS

From Dev

Scale image before toDataURL - html2canvas

From Dev

html2canvas not rendering image (externally hosted images)

From Dev

HTML2Canvas converting overflowed content to image

From Dev

Html2canvas - capture google map to image in phonegap application

From Dev

How to save html2canvas image into System Folder in jquery

From Dev

Saving Morris charts to image using HTML2CANVAS

From Dev

html2canvas doesn't render image at top left

From Dev

Line break in C3 generated SVG chart via JavaScript

From Dev

SVG chart generated through D3 not crispy

From Dev

JasperReports SVG chart in HTML report

From Dev

Empty PDF report is generated when we have multiple graphs using html2canvas and jsPDF library

Related Related

  1. 1

    Html2Canvas then Canvas2Image cutting the generated image

  2. 2

    SVG to Canvas conversion: generated image is empty

  3. 3

    Text alignment changes on exporting d3js chart svg as png using html2canvas

  4. 4

    PHP Generated SVG as background image

  5. 5

    html2canvas not capturing image

  6. 6

    html2canvas crop image on click

  7. 7

    html2canvas not taking capture of image

  8. 8

    html2canvas capturing div image

  9. 9

    html2canvas crop image on click

  10. 10

    html2canvas and jsPDF : send generated pdf as email attachment

  11. 11

    HTML Div convert into image with background image Html2canvas

  12. 12

    Saving canvas with background image to server with html2canvas

  13. 13

    HTML2Canvas - get created canvas image URI

  14. 14

    convert html with highcharts graph to image using html2canvas

  15. 15

    How to save html2canvas image into System Folder in jquery

  16. 16

    Codemirror & html2canvas: Save iFrame as Image

  17. 17

    html2canvas doesn't get image full height

  18. 18

    Saving Morris charts to image using HTML2CANVAS

  19. 19

    Scale image before toDataURL - html2canvas

  20. 20

    html2canvas not rendering image (externally hosted images)

  21. 21

    HTML2Canvas converting overflowed content to image

  22. 22

    Html2canvas - capture google map to image in phonegap application

  23. 23

    How to save html2canvas image into System Folder in jquery

  24. 24

    Saving Morris charts to image using HTML2CANVAS

  25. 25

    html2canvas doesn't render image at top left

  26. 26

    Line break in C3 generated SVG chart via JavaScript

  27. 27

    SVG chart generated through D3 not crispy

  28. 28

    JasperReports SVG chart in HTML report

  29. 29

    Empty PDF report is generated when we have multiple graphs using html2canvas and jsPDF library

HotTag

Archive