将 HTML5 画布绘图应用程序另存为 SVG 文件答案

【问题标题】：Save HTML5 Canvas Drawing App as a SVG file将 HTML5 画布绘图应用程序另存为 SVG 文件
【发布时间】：2022-01-06 10:29:16
【问题描述】：

我正在做一个画布绘图应用程序，我希望能够将图像导出为 SVG 文件。我已经完成了将图像保存为 png 文件的功能，但我在 SVG 部分遇到了一些问题。你能帮我么？这是保存 png 图片按钮的 HTML 代码：

<div class="wrapper">

    <div class="toolbar">
        <a href="#" id="save" onclick="SaveImage()">
        <img src="save.png"></a>
    </div>

<canvas id="my-canvas" width="800" height="500"></canvas>

<div id="toolbar2">
    <a id="img-file" download="image.png">
    <button onClick="download()" type="button" class="button">Save as PNG</button></a>
</div>

还有 JS：

function SaveImage(){
    var imageFile = document.getElementById("img-file");
    imageFile.setAttribute('download', 'image.png');
    imageFile.setAttribute('href', canvas.toDataURL());
}

请帮忙。我不允许使用其他 js 库。

【问题讨论】：

你尝试过做什么？你遇到了什么问题？
您想将画布的光栅图像转换为矢量图像并下载吗？那没有图书馆？
@OskarGrosser 是的..没有图书馆就不可能吗？
您可以重新实现另一个库已经完成的工作，这可能只是一项艰巨的任务。也许您可以将其他站点的某些 API 与 Fetch API 一起使用，或者您可以尝试自己实现该转换。我认为没有标准的方法可以做到这一点。（不过，不要相信我的话。）你真的需要这个，还是可选的？

标签： javascript html svg canvas

【解决方案1】：

您不能将画布的位图图像直接转换为 SVG（除非您尝试导出的位图图像（如 PNG）是 SVG 中 <image> 元素的来源——但我猜那是不是这个想法）。

既然这是一个绘图工具，您可能会使用对象和/或其他数据结构来维护编辑器的状态。有了这个假设，整个图像已经以结构化的方式表示。这种结构可用于生成 SVG 图像。示例：在画布上绘制一个带有颜色、大小和位置的圆圈：{type: "circle", color: "red", x: 30, y: 56, r: 5}。此对象在画布上绘制为弧形，但同时也可以转换为 SVG <circle> 元素。

可能有更多的库可以为您处理这个问题。 fabricjs 可能就是一个例子。这里我链接到toSVG()函数：JSDoc: Class: Canvas。

【讨论】：