Question

这是我的代码和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中的an issue引起两次生成文本元素。

应用此修补程序进行修复，直到html2canvas版本中包含this pull request：

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

我没有找到一个干净的方法来解决它。所以我想出了以下内容，需要调整来代表你的应用程序，但就像一个魅力。

// Replace each SVG text with normal text
$('text').each(function(){

    // Get the offset
    var offset = $(this).offset();

    // Create new text
    $(this).parents('[data-role="canvas"]').append('<p class="app-svg-text-replace" style="top: ' + offset.top + 'px; left: ' + parseInt(offset.left - parseInt((($(window).width() / 2) - 512))) + 'px;">' + $(this)[0].textContent + '</p>');

    // Remove the SVG text
    $(this)[0].textContent = '';

})

基本上只是将任何TEXT元素替换为P元素和svg文本的上下文，并根据TEXT偏移量对其进行定位。只需在body标签之前创建P元素并使其成为绝对值。（我把它们放在一个包装内的div中，这就是为什么有-512等，你可以忽略它）

在： enter image description here

Answer 3

根据您的目标，您可能不再需要HTML2Canvas来将SVG绘制到画布上。

至少在Chrome中，现在可以将特定的SVG直接绘制到画布上。使用您的示例：

$(document).ready(function () {
    $('#export').on('click', function () {
        // TODO
        var can = document.getElementById('canvas1');
        var ctx = can.getContext('2d');
        var img = new Image();
        var svg = document.getElementById('aaa');
        var xml = (new XMLSerializer).serializeToString(svg);
        img.src = "data:image/svg+xml;charset=utf-8,"+xml;

        ctx.drawImage(img, 0, 0);

    });
});

http://jsfiddle.net/ncv56vwf/4/

在Firefox和IE11中可能需要更多工作，但这是可能的。以下是适用于Chrome，Firefox和IE11的示例：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, 600, 600, 0, 0, 600, 600)
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"

http://codepen.io/simonsarris/pen/rVOjby

要使其在Firefox中运行，SVG必须设置width和height属性。

要使它在IE11中工作，你必须使用drawImage

的所有参数

Answer 4

IDK究竟什么不起作用，但我想，它是HTML2Canvas库。但是，当我删除字体大小的样式时，一切都变好了：

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4"
 style="color:#333333;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>

这一个完美无缺：

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="" y="25">Inventory</text>

洛尔

Answer 5

你必须下载字体。您可以在此小提琴中使用@import，因为您可以在这个小提琴中看到：
http://jsfiddle.net/scraaappy/04wkvweo/或@font-face（未经测试），或使用google font api在标题中添加＆lt; link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">（Tangerine作为示例，但您想要的任何字体：https://www.google.com/fonts/ （不幸的是，没有Lucida Grande）

@degr：如果你只是删除Lucida Grande，它会起作用，因为你的浏览器支持指定的其他字体而Lucida Grande不支持（这是windows上谷歌浏览器的情况）。 Html2canvas只能处理您的默认字体，否则您必须下载它们。如果您没有指定任何字体或仅指定了浏览器支持的字体，那么它的工作原理就是这样。

要查看浏览器支持的字体，只需调整设置以及默认字体和编码中的某个位置，您就会有一个列表框，其中包含所有支持的字体列表，您可以选择要显示的默认字体（或者您可以在这里使用javascript进行播放：list every font a user's browser can display）列出的所有字体都可以使用。如果不是，你必须使用上面的技巧

Answer 6

我发现基本上是Unicode（Lucida Sans Unicode）字体在chrome中没有正确使用HTML2Canvas，而其他东西是支持font-Size这个是小，小，大，大等...虽然这个信息没有解决您当前的问题，但如果您可以替换这些东西，那么您可以避免这个问题

Answer 7

问题是HTML2Canvas不能正确支持svg文件（这里有更多解释https://github.com/niklasvh/html2canvas/issues/95）。

如果你仍然需要HTML2Canvas，你可以做的另一种方法是首先将SVG转换为Canvas（canvg.js这样做）然后在其上使用HTML2Canvas，然后将其还原。可以在上面的链接中找到执行此操作的代码示例。

SVG Text属性加倍 - HTML2CANVAS

7 个答案: