HTML2CANVAS-SVG文本属性是加倍的吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (7)
  • 关注 (0)
  • 查看 (526)

这里是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);
                },
            });
        });
});

我试图使用html2画布库将SVG转换为画布图像。在这个例子中,我只是将画布图像附加到输出中。你可以清楚地看到文本是乘的。怎么解决?

提问于
用户回答回答于
用户回答回答于

Unicode(Lucida Sans Unicode)字体没有在chrome正确地使用HTML 2Canvas,其他的东西是支持的字体大小,这是小,小,大,大等。

用户回答回答于

你必须下载字体。你可以用@import在你的CSS中,你可以在fiddle上看到:

http://jsfiddle.net/staaappy/04wkvweo/或@font-face(未测试),或通过添加<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">在标题中(橙色作为示例,但这里的任何字体:https://www.google.com/fonts/

用户回答回答于

去掉字体大小的风格:

<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>
用户回答回答于

chrome

$(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/

下面是一个在Chrome、Firefox和IE 11中工作的示例:

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必须有它的widthheight属性集。

要使它在IE11中工作,必须使用所有参数drawImage

用户回答回答于
// 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 = '';

})

之前:

之后:

用户回答回答于

html 2画布问题,生成两次文本元素。

将此修补程序应用于修复直到pull请求包含在html2画布发行版中:

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

扫码关注云+社区

领取腾讯云代金券