0

我需要拍摄一个 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");

绘制图像（）：

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？

感谢你的帮助。

4

1 回答 1

0

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

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

对于图片、文字、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 插件。

于 2015-02-16T18:12:10.497 回答