Question

我正在使用的程序是这个

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。但是问题是我不想失去画布内部的工作质量。我见过像杰森这样的图书馆。但是我真的不知道要实现它们。

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

我的最后一个是。与画布库或svg库一起使用时，您还有什么建议？我打算制作一个像Prezi.com这样的非常基本的应用程序是（创建对象）在线保存文件，等等……（我也打算在工作空间中插入svg或动画）如您所见，现在我正在使用画布库（尤其是fabric.js）。但是自从我开始以来，如果我没有使用最好的替代方法，对我来说更容易进行更改。

Answer 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...

Answer 2

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

此外，我不确定将其存储为svg文件是否能很好地工作，因为svg是矢量图形格式，而画布是位图。我知道可以将位图图像嵌入到svg文件中，但这首先需要将其以位图格式存储。

将画布另存为文件吗？（然后再次打开文件）（质量不变）

2 个答案:

将画布另存为文件吗？ （然后再次打开文件）（质量不变）

2 个答案:

将画布另存为文件吗？（然后再次打开文件）（质量不变）