2

SVGをCANVASに変換し、画像として保存したいと考えています。私は自分のページでJavaScriptによってすでに生成されたsvgを持っています。私はこのコードを使用します：

$("#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);


});

どちらの方法も機能しません。なんで？

4

1 に答える 1

10

canvg メソッドには SVG ソース文字列 (または url または XMLDocument) が必要なので、このように XMLSerializer を使用して svg 要素を svg ソースに変換する必要があります。

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

https://code.google.com/p/canvg/source/browse/trunk/canvg.jsを参照してください

于 2014-08-24T08:44:34.730 に答える