将 HTML5 画布转换为 SVG 的方法？

我需要将 HTML5 画布转换为 SVG 进行编辑。我怎样才能实现这个目标？

Try canvas2svg.js https://github.com/gliffy/canvas2svg. [Demo http://gliffy.github.io/canvas2svg/]

我自己也遇到了这个需要，并最终为此编写了一个库。当时，其他库有点稀疏，或者没有生成有效的 SVG。

但基本概念是相同的。您创建一个模拟画布 2D 上下文，然后在调用画布绘图命令时生成 SVG 场景图。基本上你可以重复使用相同的绘图功能。根据传递给它的上下文，您可以绘制到标准 2D 画布，也可以生成可以序列化的 SVG 文档。

您实际上无法“转换”已绘制的画布元素，因为它只是一个位图，因此请记住这一点。当您导出到 SVG 时，您实际上只是使用假上下文再次调用相同的绘图函数。

举个简单的例子：

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg