Question

我正在使用D3-Celestial Library（https://github.com/ofrohn/d3-celestial）并尝试将画布图像转换为SVG（我需要将其用作矢量图像，以便将其转换为GCode用于激光切割机）。我尝试过使用Fabric JS库和Canvas-GetSVG但没有成功有没有人有一个好的起点或简单的方法来做到这一点？

<div style="overflow:hidden;"><div id="celestial-map"></div></div>
<div id="celestial-form"></div>


<script type="text/javascript">
var canvas;
Celestial.display({
  form: true,
  location: true,
  datapath: "../data/",
  stars: {proper: true}
});
document.getElementById("celestial-map").firstChild.setAttribute("id", "findthisstring");

function myFunction(){
   var canvas = new fabric.Canvas('findthisstring', { isDrawingMode: true });
   canvas.isDrawingMode = false;
   canvas.toSVG();
 }
 function do_save() {
    var canvas = new fabric.Canvas('findthisstring', { isDrawingMode: true });
    canvas.isDrawingMode = false;
    var filedata=canvas.toSVG(); // the SVG file is now in filedata

    var locfile = new Blob([filedata], {type: "image/svg+xml;charset=utf-8"});
    var locfilesrc = URL.createObjectURL(locfile);//mylocfile);

    var dwn = document.getElementById('dwn');
    dwn.innerHTML = "<a href=" + locfilesrc + " 
    download='mysvg.svg'>Download</a>";
  }
  </script>

 <button onclick="myFunction()">Click me</button>
 <input type="button" id="saveBtn" value="save" onclick="do_save()"></input>
 <div id='dwn'></div>
 <div id="imgOut"></div>

我尝试使用几个不同的库将数据从Canvas对象导出到SVG，但只能获得空SVG。

Answer 1

Fabric.js不是将面向像素的<canvas>内容转换为矢量格式的灵丹妙药。只有使用fabric.Canvas方法 绘制的内容才能导出为矢量格式。

这是如何工作的？从Fabric.js的角度来看，如果初始化Canvas对象，则该画布为空。之前绘制的内容完全被忽略。如果给fabric.Canvas对象一个命令，则会发生两件事：对HTML <canvas>元素进行更改，覆盖现有内容，并将更改记录在数据结构中。 .toSVG()方法只能使用这些数据导出到SVG。 canvas元素本身是一个只写输出设备。

要明确地重复：<canvas>元素不包含矢量信息。无论你使用哪种库，你可以期望提取的最佳值是这样的：

<svg> <image xlink:href="data:image/png;base64....." /> </svg>

数据源是像素图像。

Answer 2

我目前没有具体细节，但我试图做同样的事情（来自令人沮丧的不完整的Make杂志文章）并且能够通过以下方式强制执行SVG：

托管d3-celestial的本地实例

修改HTML页面以使用实际使用SVG的旧版本0.4（在dist文件夹中）

安装“SVG crowbar”书签以将输出导出到文件。

d3-celestial library导出到SVG

2 个答案: