html and Svg to Canvas javascript

Question

<div id="Contents">
<div style="float:left;margin-left:10px;">
<svg></svg>
</div>
<div style="float:left;margin-left:10px;">
<svg></svg>
</div>
</div>

This is my html code. I want to convert it canvas image.

html2canvas($("#Contents"), {
  onrendered: function(canvas) {
   window.open(canvas.toDataURL());

  }
});

I use html2canvas plugin for convert it to image but It does not show svg. I solve converting svg tp canvas but now html2canvas not working

  var $to=$("#MainContents").clone();

            $($to).children(".box").each(function() {
    var svg = ResizeArray[$(this).children(".box-content").children().attr("new-id")-1].svg();
            var Thiscanvas = document.createElement("canvas");
            Thiscanvas.setAttribute("style", "height:" + 100 + "px;width:" + 100+ "px;");

            canvg(Thiscanvas, svg);

            $(this).append(Thiscanvas);

        });
        html2canvas($($to), {
      onrendered: function(canvasq) {
        var w=window.open(canvasq.toDataURL());
        w.print();
      }
    });

I can convert svg to canvas but html2canvas function not working.

http://stackoverflow.com/questions/14165426/can-html2canvas-render-svg-in-a-page — Azad, Mar 24 '16 at 09:49

shinobi · Answer 1 · 2018-06-04T14:06:58.597

You will need to use canvg library for drawing this svg to a temporary canvas and then remove that canvas once you take the screenshot using html2canvas.

Here is the link for canvg : https://github.com/canvg/canvg

Try this:

//find all svg elements in $container
//$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc
var svgElements= $container.find('svg');

//replace all svgs with a temp canvas
svgElements.each(function () {
    var canvas, xml;

    canvas = document.createElement("canvas");
    canvas.className = "screenShotTempCanvas";
    //convert SVG into a XML string
    xml = (new XMLSerializer()).serializeToString(this);

    // Removing the name space as IE throws an error
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    //draw the SVG onto a canvas
    canvg(canvas, xml);
    $(canvas).insertAfter(this);
    //hide the SVG element
    this.className = "tempHide";
    $(this).hide();
});

//...
//HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT
//...

//After your image is generated revert the temporary changes
$container.find('.screenShotTempCanvas').remove();
$container.find('.tempHide').show().removeClass('tempHide');

score 3 · Answer 2 · edited Aug 07 '20 at 14:12

As the html2canvas don't take svg elements, you need to convert all svg elements to canvas before you call the html2canvas method. You could use the canvg library to convert all the svg to canvas. You can pass the jquery object(which needs to convert from svg to canvas, can also be a parent element) to the following method:

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, {
    onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
    }
    });
}

Thank you so much for this! The snippet worked like a charm. I'm finally able to get it working. However, I still have to calibrate it as I'm noticing the snapshots cropping the charts in a weird way. — richdotjs, Apr 27 '18 at 20:26

score 1 · Answer 3 · answered Jun 19 '14 at 18:16

Your solution works beautifully. Since I am not using jQuery in my application, I had to change couple of lines in svgCanvas for getting the svg elements and iterating through them. The rest of the functions worked without any changes. My code is...

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

        var svgElems = document.getElementsByTagName("svg");

        for (var i=0; i<svgElems.length; i++) {
            var node = svgElems[i];
            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);
        }
}

Your code has quite some unused variables. I know it's old but you should probably look into it :-) — Mathijs Segers, Nov 08 '18 at 08:28

score -1 · Answer 4 · answered Aug 16 '13 at 11:09

-1

html2canvas doesn't allow to save SVG is an issue.
https://github.com/niklasvh/html2canvas/issues/95

If you want to save an SVG you an follow other way, like to transform your SVG into a PNG for example

SVG -> canvas -> PNG -> canvas -> PNG

answered Aug 16 '13 at 11:09

Alessandro Minoccheri

35,521
22
122
171

Can I use html2canvas with canvg ? . I am gonna convert first canvg before use html2canvas. I think they are not work together. – user2622044 Aug 16 '13 at 15:09
you can try it, see in the link that I have posted into my answer someone have tried already this – Alessandro Minoccheri Aug 16 '13 at 15:15

井上心叶 · Answer 5 · 2019-12-07T16:26:50.177

-2

You can create your own innerHTML, like the following setSVG： enter image description here

In fact, you only need to pay attention to two steps: creating the SVG context label and setting properties (with context)

createElementNS and setAttributeNS are two methods you may need！

Common namespaces are as follows:

svg:http://www.w3.org/2000/svg
xhtml:http://www.w3.org/1999/xhtml
xlink:http://www.w3.org/1999/xlink
xml:http://www.w3.org/XML/1998/namespace
xmlns:http://www.w3.org/2000/xmlns/

edited Dec 07 '19 at 16:26

answered Dec 06 '18 at 12:40

井上心叶

11
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. [how to answer](https://stackoverflow.com/help/how-to-answer) – Agilanbu Dec 06 '18 at 13:02
Thank you for your suggestion. I have revised the answer – 井上心叶 Dec 07 '19 at 16:27

html and Svg to Canvas javascript

5 Answers5

Linked