将画布另存为文件？（并再次打开文件）（不损失质量）答案

【问题标题】：Save canvas as file? (and open file again) (without loosing quality)将画布另存为文件？（并再次打开文件）（不损失质量）
【发布时间】：2018-10-11 22:49:02
【问题描述】：

我正在使用的程序是这个

var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);


function AddCircle() {
  canvas.add(new fabric.Circle({
    left: 230/canvas.getZoom(),
    top: 140/canvas.getZoom(),
	radius: 75/canvas.getZoom(),
	fill: 'green',
  }));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

<button onclick="AddCircle()">Add Circles</button>
<br>
<br>
<button onclick="Saveas()">Save as</button>
<button onclick="Openfile()">Open file</button>
<div  class="box">

    <canvas id="c"></canvas>

所以现在。我想将画布（所有内容/所有圆圈或对象）保存为文件。在这一点上我已经看到有几种方法可以保存，例如，保存为 png。但问题是我不想降低画布内作品的质量。我见过像 jason 这样的图书馆。但我真的不知道如何实现它们。

我还看到使用 svg 保存为文件更容易，因为它可以保存/打开为 .xhml 文件而不会降低质量。我的另一个问题是：有没有一种简单的方法可以将画布转换为 xhml，所以当您单击保存按钮时，将文件保存为 xhml，一旦保存回来使用它，请单击“打开文件按钮”打开 .xhml 文件并将其转换为画布再次（显示工作区中的内容）？这只是我的想法，任何建议、您推荐更多的库或演示 sn-ps 来解决这个问题将不胜感激。

我的最后一个是。你更推荐什么，使用画布库或 svg 库？我计划制作一个非常基本的应用程序，比如 Prezi.com 是（创建对象）在线保存文件等等......（我还计划在工作空间中插入 svg 和动画）如您所见，现在我正在使用画布库（尤其是 fabric.js）。但既然我刚开始，如果我不使用最好的替代方案，我会更容易改变。

【问题讨论】：

Fabricjs 有多个导出选项，例如 svg 或 json，然后您可以从 fabricjs 再次加载。查看手册。

标签： svg canvas

【解决方案1】：

我不确定这是可能的，

HTML Canvas 它是一个位图，您可以使用 Javascript 进行绘制。

嵌入在 HTML 文档中的 SVG，就像 DOM 的子树一样，仍然具有有效的 XML 表示，任何（不确定是否有，但大多数），SVG 编辑器和查看器都会理解。

您可以通过设置svg 或div + svg，然后将所有子元素附加到此svg，轻松使用 SVG“模拟”画布，因为绘图的几何思想画布和做矢量图没什么不同，你可以“迁移”到它。

这里的提示是在 SVG 上定义一个 viewbox，就像定义画布尺寸一样，然后，您可以保留您的单位。（请注意数字）

另外，将事件附加到 SVG 元素会更容易。

老实说，关于 SVG 的 w3schools 教程已经足够全面了，剩下的只是一个很好的用例，并使用它们的构建块（使用 javascript）

这就是您为 DOM 创建 SVG 元素的方式。

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttributeNS(null, 'x', 5);
circle.setAttributeNS(null, 'y', 15);
# more code...

【讨论】：

【解决方案2】：

我认为将图像保存为 png 文件应该没问题。 png 压缩是无损的，并且支持透明图像，因此将之前保存的 png 文件绘制到画布上应该可以完美地还原内容而无需任何更改。

另外，我不确定将其存储为 svg 文件是否会正常工作，因为 svg 是矢量图形格式，而画布是位图。我知道可以将位图图像嵌入到 svg 文件中，但这首先要求它以位图格式存储。

【讨论】：