html和Svg到画布javascript

我使用html2canvas插件将其转换为图像，但它不显示svg。 我解决了转换svg tp画布的问题，但现在html2canvas不起作用

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

  }
});

---

我可以将svg转换为画布，但html2canvas功能不起作用。

html2canvas不允许保存svg是一个问题。

如果您想保存SVG，可以采用另一种方法，例如将SVG转换为PNG

---

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

由于html2canvas不接受SVG元素，因此在调用html2canvas方法之前，需要将所有SVG元素转换为画布。您可以使用该库将所有svg转换为画布。可以将jquery对象（需要从svg转换为画布，也可以是父元素）传递到以下方法：

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

---

您的解决方案运行良好。因为我在应用程序中没有使用jQuery，所以我不得不在svgCanvas中更改几行，以获取svg元素并遍历它们。其余的功能没有任何变化。我的代码是

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

函数svgToCanvas（targetElem）{
var nodesToRecover=[]；
var nodesToRemove=[]；
var svgElems=document.getElementsByTagName（“svg”）；
对于（var i=0；i您需要使用canvg库将此svg绘制到临时画布，然后在使用html2canvas截图后删除该画布

以下是canvg的链接：

试试这个：

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

您可以创建自己的innerHTML，如下所示：

实际上，您只需要注意两个步骤：创建SVG上下文标签和设置属性（使用上下文）

CreateElements和setAttributeNS是您可能需要的两种方法

常用名称空间如下所示：


svg：

xhtml：

xlink：

xml:

xmlns：

我可以将html2canvas与canvg一起使用吗？。在使用html2canvas之前，我会先转换第一个canvg。我认为它们不能一起工作。你可以试试看，在我发布到答案中的链接中，有人已经尝试过了这一功能，可以在Canvas上呈现SVG谢谢你！这段代码非常有用。我终于能够让它工作了。但是，我仍然需要校准它，因为我注意到快照以一种奇怪的方式裁剪图表。您的代码中有很多未使用的变量。我知道它很旧，但您可能应该查看它：-）虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。谢谢您的建议。我已修改了答案
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);
        }
}

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