SVG Text属性加倍 - HTML2CANVAS

Question

Here is mycode and link to 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);
                },
            });
        });
});

I'm trying to convert an svg to canvas image using html2canvas library. In the example I'm just appending the canvas image to the output. You can clearly see that the text is multiplied. Could anyone advice me to solve this issue.

Hope my question is clear. Thanks in advance.

Answer 1

Caused by an issue in html2canvas generating the text elements twice.

Apply this patch to fix until this pull request is incorporated in a html2canvas release:

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

I didn't find a clean way to fix it. So I came up with the following, will need tweaking to represent your application but works like a charm.

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

})

Basically just replaces any TEXT element with a P element and the context of the svg texts, and positions it based on the TEXT offsets. Just create the P elements before the body tag and make them absolute. (I am putting them in a divs inside a wrapper that's why there is -512 etc, you can ignore that)

Before:

After:

Answer 3

Depending on what you're targeting you may no longer need HTML2Canvas in order to paint SVG onto a canvas.

In at least Chrome it is possible to draw that particular SVG directly onto a canvas now. Using your example:

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

---

It may take a bit more work in Firefox and IE11, but it is possible. Here's an example that works in Chrome, Firefox, and 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

For it to work in firefox the SVG must have its width and height attributes set.

For it to work in IE11 you MUST use all arguments to drawImage

Answer 4

IDK what exactly does not work, but I suppose, that it is HTML2Canvas library. Becase, when I remove font-size style proprerty, all became ok:

<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>

And this one work perfect:

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

lol

Answer 5

you have to download the font. You can use @import in your css as you can see in this fiddle :
http://jsfiddle.net/scraaappy/04wkvweo/ or @font-face (not tested), or use google font api by adding < link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> in your header (Tangerine as sample, but any font you want here : https://www.google.com/fonts/ (unfortunately, no Lucida Grande)

@degr : If you just remove Lucida Grande, it will work because other fonts specified are supported by your browser whereas Lucida Grande is not (this the case for google chrome on windows). Html2canvas can only deal with your default font, otherwise you have to download them. That's why it works if you don't specified any font or if you specified only fonts supported by your browser.

To see fonts supported by your browser, just adjust settings and somewhere in default fonts and encoding, you have a list box containing the list of all font supported which let you choose the default font you want to be displayed (or you can play with javascript as it's suggested here: list every font a user's browser can display ) All the fonts listed will work. If not you have to use the trick above

Answer 6

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

Answer 7

Issue is that HTML2Canvas does not properly support svg files (more explanation here https://github.com/niklasvh/html2canvas/issues/95 ).

An alternative you can do if you still need HTML2Canvas is to convert the SVG to Canvas first (canvg.js does this) then use HTML2Canvas on that, then revert it back. An example of the code that does this can be found on the link above.