【问题标题】：Capture a DIV with svg使用 svg 捕获 DIV
【发布时间】：2015-02-16 18:08:17
【问题描述】：

我需要拍摄一个 div 的快照。我使用了 html2canvas，它工作正常。但是当我将 SVG 添加到同一个 div 中时，它会忽略 svg。

我也试过 drawImage() 也没有工作。

我读到 clone() 可以做到这一点，但没有用。

<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);

克隆（）：

$(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);
  }
      });
        });

如何捕获包含文本、svg、图像的 DIV？

感谢您的帮助。

【问题讨论】：

标签： jquery html canvas html2canvas canvg

【解决方案1】：

谁说开源不是一件美妙的事情：）

您可以使用许多很棒的插件。

图片、文字、div

您可以使用 HTML2Canvas 和 FileSaverJS 联合来捕获 div 的图像：

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

这会等待btnSave 被点击。如果是，它将小部件 div 转换为画布元素，然后使用 saveAs() 。

http://jsfiddle.net/6FZkk/1/ 提供了此工作的示例。

对于 svg

要捕获 SVG 图像，请使用 canvg。包括该页面上指示的两个 javascript 文件。那么最简单的方法是：

<body onload=canvg()>

没有其他方法可以做到这一点。你必须使用canvg插件。

【讨论】：

@markE 你找到解决方案了吗？如果您分享您如何解决此问题，它将更有帮助。