2

I want to converty my SVG into CANVAS and then save it as image. I have svg already genereated by javascript in my page. I use this code:

$("#menu-save-image").click(function () {
    var svg = document.getElementsByTagName('svg');
    var canvas = document.getElementById("test");
    canvg(canvas, svg);

    // or second way
    var c = document.getElementById('test');
    var ctx = c.getContext('2d');
    ctx.drawSvg(svg, 0, 0, 500, 500);


});

Both ways doesn't work. Why?

sko
  • 431
  • 1
  • 5
  • 10

1 Answers1

10

canvg method needs SVG source string (or url or XMLDocument), so you should convert the svg element to svg source by using XMLSerializer like this.

var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById("test");
canvg(canvas, svgString);

see https://code.google.com/p/canvg/source/browse/trunk/canvg.js

defghi1977
  • 5,081
  • 1
  • 30
  • 29
  • I got this error with that. `Attr.nodeValue' is deprecated. Please use 'value' instead. canvg.js:725 3 ERROR: Element 'feComponentTransfer' not yet implemented. canvg.js:2619 Uncaught TypeError: undefined is not a function canvg.js:2526` – sko Aug 24 '14 at 21:04