2

I have a svg on my page that I need to export to a png, so following the advice here, I'm using canvg.

The copy seems to work fine at first but then the canvases height starts mysteriously increasing.

Am I doing something obviously wrong? I've tried setting all kinds of sizes for the canvas with no luck. Fails in IE and Chrome.

Here is my export function: 

function copytocanvas()
{
    var c = document.getElementById('canvas');
    c.width = $('#svgChart').width();
    c.height = c.width;
    c.getContext = document.getElementById('canvas').getContext;


    var svg = document.getElementById('svgChart'); // or whatever you call it
    var serializer = new XMLSerializer();
    var str = serializer.serializeToString(svg);

    canvg(c, str);  
}

Here is a jsfiddle to show the problem: http://jsfiddle.net/LkqTU/4772/

The problem seems to get worse when scrolling!

Community
  • 1
  • 1
woggles
  • 7,444
  • 12
  • 70
  • 130
  • It looks like canvg is, for some reason, resizing the canvas whenever the mouse is moved. `canvg(c, str, {ignoreMouse:true});` stops the canvas from resizing constantly, but the canvas is still over-sized. – Shmiddty Oct 24 '12 at 21:52

1 Answers1

2

Try this:

canvg(c, str, {ignoreMouse:true, ignoreDimensions:true});

edit:

It looks like you don't need to ignoreMouse:

canvg(c, str, {ignoreDimensions:true}); should do the trick.

Shmiddty
  • 13,847
  • 1
  • 35
  • 52