Capture a DIV with svg

Question

I need to take a snapshot of a div. I used html2canvas and it worked okay. But when I add SVG into the same div it ignores the svg.

I also tried drawImage() which did not work either.

I read that clone() could do this but did not work.

<canvas id="myCanvas" width="250" height="300">Does not support HTML5 canvas.</canvas>

$("#Numbers").load("random/Nums.html");

drawImage():

var img = $("#Numbers");
$("#myCanvas").getContext("2d").drawImage(img, 0, 0, 125, 150);

clone():

$(myCanvas).html($(Numbers).clone());

html2canvas:

document.querySelector("#dbutton").addEventListener("click", function() {
    var canvas = document.querySelector("#Numbers");

        html2canvas(document.body, {onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
      });
        });

How do I capture a DIV which includes text, svg, images?

Appreciate your help.

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Who says open source isn't a wonderful thing:)

There are many great plugins that you can use.

For pics,text,div

You can use HTML2Canvas and FileSaverJS in union to capture image of a div:

(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                canvas.toBlob(function(blob) {
                    saveAs(blob, "Dashboard.png"); 
                });
            }
        });
    });
});

This waits for the btnSave to be clicked. When it is, it converts the widget div to a canvas element and then uses the saveAs() .

An example of this working is available at this http://jsfiddle.net/6FZkk/1/.

For svg

For capturing SVG images use canvg. Include both javascript files as indicated on that page. Then the easiest way to do this is:

<body onload=canvg()>

There is no other way to do this. You have to use the canvg plugin.

@markE did you found any solution? It will be more helpful, if you share how you solved this issue. — CJ Ramki, Feb 16 '16 at 14:00

Capture a DIV with svg

1 Answers1

For pics,text,div

For svg