SVG Text属性加倍 - HTML2CANVAS

Question

这是mycode和JSFiddle的链接.

HTML

<input type="button" id="export" value="Export"/>
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>

JS

$(document).ready(function(){
        $('#export').on('click', function() {       
            html2canvas(document.body, {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                },
            });
        });
});

我正在尝试使用html2canvas库将svg转换为canvas图像.在示例中,我只是将画布图像附加到输出.您可以清楚地看到文本成倍增加.任何人都可以建议我解决这个问题.

希望我的问题很明确.提前致谢.

Answer 1

由html2canvas中的问题引起两次生成文本元素.

应用此修补程序进行修复,直到此拉取请求合并到html2canvas版本中:

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Answer 2

问题是 HTML2Canvas 无法正确支持 svg 文件（更多说明请参见https://github.com/niklasvh/html2canvas/issues/95）。

如果您仍然需要 HTML2Canvas，您可以做的另一种选择是先将 SVG 转换为 Canvas（canvg.js 就是这样做的），然后使用 HTML2Canvas，然后将其恢复回来。可以在上面的链接中找到执行此操作的代码示例。