html2canvas can not display Svg and Path tags of jsPlumb plugin

[salehmosleh]

here is real image :

and here is html2canvas capture :

here is html codes of Svg and Path tags that html2canvas can not display it :

[davloperez]

Hi @salehmosleh , I wrote a post about this problem in my blog: http://eatandcode.es/2017/08/12/Soluciones-a-la-captura-de-svg-con-html2canvas/
It is in spanish, but it provides you a workaround to get nice Svg image from JsPlumb.
I hope it is useful for you!

[BobLuo]

Pls review #95, similar issue.

include extrenal library:
https://github.com/canvg/canvg

combine @gifarangw, @steren and @remiremi solution, my solutin as below:

function take_second(targetElem){
    // First render all SVGs to canvases
    var elements = targetElem.find('svg').map(function() {
        var svg = $(this);
        var canvas = $('<canvas></canvas>').css({position: 'absolute', left:svg.css('left'), top: svg.css('top')});

        svg.replaceWith(canvas);

        // Get the raw SVG string and curate it
        var content = svg.wrap('<p></p>').parent().html();
        svg.unwrap();

        canvg(canvas[0], content);

        return {
            svg: svg,
            canvas: canvas
        };
    });

    // At this point the container has no SVG, it only has HTML and Canvases.
    html2canvas(targetElem[0], {
      onrendered: function(canvas) {
          // Put the SVGs back in place
          elements.each(function() {
              this.canvas.replaceWith(this.svg);
          });

          $("#previewImage").append(canvas);
      }
    });
}

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[mhlm71]

Hi @salehmosleh , I wrote a post about this problem in my blog: http://eatandcode.es/2017/08/12/Soluciones-a-la-captura-de-svg-con-html2canvas/
It is in spanish, but it provides you a workaround to get nice Svg image from JsPlumb.
I hope it is useful for you!

Here is that article in English language, thanks to google translator.

[LanjianNUll]

Hi @salehmosleh , I wrote a post about this problem in my blog: http://eatandcode.es/2017/08/12/Soluciones-a-la-captura-de-svg-con-html2canvas/
It is in spanish, but it provides you a workaround to get nice Svg image from JsPlumb.
I hope it is useful for you!

Thank you very much, I have already solved it. After reading your blog, I found the problem that svg has absolute positioning. Thanks again!
Also, cite your blog post (google translation)

SVG positioning is not absolute. If you have a SVG with an absolute location
Elements cannot be drawn correctly using html2canvas. To fix this, you
You can wrap SVG elements with absolute positioning (copy the top of the SVG,
Position the bottom, left or right) and remove the SVG position: absolute, top, bottom,
The style corresponding to the left side or he has. To wrap SVG, you can use jQuery's .wrap() function to help them.

I hope I can help others, thank you again. @mhlm71