Html 将 HTML5 画布转换为 SVG 的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8571294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Method to convert HTML5 canvas to SVG?
提问by Tommy
Need to convert an HTML5 canvas to SVG for editing ? Pointer will be appreciated
需要将 HTML5 画布转换为 SVG 进行编辑吗？指针将不胜感激
回答by Kerry Liu
Try canvas2svg.js. [Demo]
试试canvas2svg.js。[演示]
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.
我自己也遇到了这个需求，最后为此编写了一个库。当时，其他库有点稀疏，或者没有生成有效的 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.
不过基本概念是一样的。您创建一个模拟画布 2D 上下文，然后在调用画布绘图命令时生成一个 SVG 场景图。基本上你可以重复使用相同的绘图功能。根据传递给它的上下文，您可以绘制到标准 2D 画布或生成可以序列化的 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.
您实际上无法“转换”已绘制到的画布元素，因为它只是一个位图，因此请记住这一点。当您导出到 SVG 时，您实际上只是使用虚假上下文再次调用相同的绘图函数。
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
回答by albert
canvas-svg lets you save 2d http://code.google.com/p/canvas-svg/you can do the reverse with canvg http://code.google.com/p/canvg/
canvas-svg 可让您保存 2d http://code.google.com/p/canvas-svg/您可以使用 canvg http://code.google.com/p/canvg/做相反的事情
回答by Brett Zamir
See also http://code.google.com/p/html5-canvas-svg/
另请参阅http://code.google.com/p/html5-canvas-svg/
Fabric.jsadvertises having a "canvas-to-svg" parser, and it has a demo which apparently converts canvas to SVG. While the other items do work if you use the controls and then "Rasterize canvas to" SVG, it does have an issue converting the default image, so you'd have to check whether this is actually capable of converting raw canvases to SVG or only if creating items through the editor.
Fabric.js宣传有一个“canvas-to-svg”解析器，它有一个演示，显然可以将 canvas 转换为 SVG。如果您使用控件然后“将画布光栅化为”SVG，其他项目确实可以工作，但转换默认图像确实存在问题，因此您必须检查这是否真的能够将原始画布转换为 SVG 或仅如果通过编辑器创建项目。
回答by squishy
I think the canvas must already be drawing an svg for this method, but I found it in the course of trying to create a download svg button myself, also ran into this stack overflow question in the same search figured it may be relevant.
我认为画布一定已经为这个方法绘制了一个 svg，但我在自己尝试创建一个下载 svg 按钮的过程中发现了它，在同一个搜索中也遇到了这个堆栈溢出问题，认为它可能是相关的。
from https://bramp.github.io/js-sequence-diagrams/
来自 https://bramp.github.io/js-sequence-diagrams/
around line 200ish, but who knows he may edit site in the future
大约在 200 行左右，但谁知道他将来可能会编辑网站
editor is just a div element, and for the purpose of this noise, he's just packing the stuff the svg was generated off of into the downloaded svg.
editor 只是一个 div 元素，为了消除这种噪音，他只是将生成 svg 的内容打包到下载的 svg 中。
diagram_div is the canvas the actual svg is sitting in.
diagram_div 是实际 svg 所在的画布。
function(ev) {
var svg = diagram_div.find('svg')[0];
var width = parseInt(svg.width.baseVal.value);
var height = parseInt(svg.height.baseVal.value);
var data = editor.getValue();
var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';
var a = $(this);
a.attr("download", "diagram.svg"); // TODO I could put title here
a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
}
