把HTML5画布转换成SVG的方法？

Question

需要将HTML5画布转换为SVG进行编辑吗？指针将不胜感激

Answer 1

试试canvas2svg.js.[ 演示 ]

我自己开始需要这个,最后为此编写了一个库.当时,其他库有点稀疏,或者没有生成有效的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

Answer 2

canvas-svg让你保存2d http://code.google.com/p/canvas-svg/ 你可以用canvg http://code.google.com/p/canvg/做相反的事情