SVG Text attribute is doubling - 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.

score 6 · Answer 1 · answered Aug 12 '15 at 10:26

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

Foxhoundn · Answer 2 · 2015-05-04T14:25:46.660

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: enter image description here

After: enter image description here

score 1 · Answer 3 · answered May 05 '15 at 15:19

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

The first version should work for IE9+ & FF too, just replace `charset=utf-8,` with `charset=utf8,`. Also to be noted that IE will taint the canvas then, so no more possibility to use `toDataURL` or `toBlob` or `getImageData` — Kaiido, May 05 '15 at 15:28
oh and you may want to wrap the `ctx.drawImage` into a load event, and to `encodeURIComponent` the xml before setting it as the image's src. Look at [this answer](http://stackoverflow.com/questions/29968549/firefox-svg2blob-not-working-as-expected/30002502#30002502) for a complete walk through a valid svg before drawing, and [your fiddle updated](http://jsfiddle.net/ncv56vwf/5/) which now works with FF and IE9+ — Kaiido, May 05 '15 at 15:47

score 1 · Answer 4 · answered May 08 '15 at 09:38

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

score 1 · Answer 5 · edited May 23 '17 at 12:17

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

score 0 · Answer 6 · answered May 08 '15 at 08:12

What I have found is basically Unicode (Lucida Sans Unicode) font is not properly working with HTML2Canvas in chrome, and other thing is supported font-Size for this are small, smaller, large, larger etc... though this info doesn't solve your current problem, but if it is possible for you to replace these things then you might be able to avoid this problem

score -1 · Answer 7 · answered Apr 13 '15 at 03:09

-1

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.

answered Apr 13 '15 at 03:09

Pretty Cool

587
4
12

https://github.com/niklasvh/html2canvas/releases Just see the latest alpha release. It supports SVG Rendering it seems. – Vignesh Gopalakrishnan Apr 13 '15 at 03:16

SVG Text attribute is doubling - HTML2CANVAS

7 Answers7

Linked