将 HTML5 画布转换为 SVG 的方法? [英] Method to convert HTML5 canvas to SVG?

问题描述

我需要将 HTML5 画布转换为 SVG 进行编辑.我怎样才能做到这一点?

I need to convert an HTML5 canvas to SVG for editing. How can I achieve this?

推荐答案

尝试 canvas2svg.js.[演示]

我自己也遇到了这个问题，最后为此编写了一个库.当时，其他库有点稀疏，或者没有生成有效的 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.

举个简单的例子:

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