把HTML5画布转换成SVG的方法？ [英] Method to convert HTML5 canvas to SVG?

问题描述

需要将HTML5画布转换为SVG进行编辑？
指针将受到赞赏

Need to convert an HTML5 canvas to SVG for editing ? Pointer will be appreciated

推荐答案

试试 canvas2svg.js 。 [ Demo ]

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

I ran into needing this myself and ended up writing a library for this. At the time, the other libraries were a bit sparse, or didn't generate valid SVG.

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

The basic concept is the same though. You create a mock canvas 2D context and then generate an SVG scene graph as you call canvas drawing commands. Basically you can reuse the same drawing function. Depending on what context you pass to it, you either draw to a standard 2D canvas or generate an SVG document that you can serialize.

你实际上不能转换一个被绘制的画布元素，因为它只是一个位图，所以记住这一点。当你输出到SVG时，你真的只是使用伪造的上下文再次调用相同的绘图函数。

You can't actually "transform" a canvas element that's been drawn to, as it's just a bitmap, so keep that in mind. When you export to SVG you're really just calling the same drawing function again using a fake context.

所以作为一个简单的例子：

So as a quick example:

//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

这篇关于把HTML5画布转换成SVG的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！