Сохранить холст как файл?(и снова откройте файл) (без потери качества)

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.и снова преобразовать его в canvas (чтобы показать содержимое в рабочей области)?Это всего лишь мои мысли, любые предложения, библиотеки, которые вы рекомендуете больше, или демонстрационные фрагменты для решения этой проблемы. Буду очень признателен.Что вы посоветуете больше, работая с библиотеками canvas или svg ?.Я планирую сделать очень простое приложение, такое как Prezi.com: (создавать объекты) онлайн-сохранение файлов и т. Д. (Также я планирую вставить svg и, возможно, анимации в рабочее пространство). Как вы видите, теперь я использую canvasбиблиотеки (в частности, fabric.js).Но с тех пор, как я начинаю, мне будет легче измениться, если я не использую лучшую альтернативу.

Answer 1

Я думаю, что сохранение изображения в виде файла PNG должно быть просто отлично.Сжатие PNG без потерь и поддерживает прозрачные изображения, поэтому рисование ранее сохраненного файла PNG на холсте должно полностью восстановить содержимое без каких-либо изменений.

Кроме того, я не уверен, будет ли работать его сохранение в виде файла SVGэто хорошо, поскольку svg является векторным графическим форматом, а canvas - растровым.Я знаю, что есть возможность встроить растровые изображения в SVG-файл, но для этого необходимо, чтобы он был сохранен в растровом формате.

Answer 2

Я не уверен, что это возможно,

HTML Canvas - это растровое изображение, которое вы рисуете с помощью Javascript.

SVG, встроенный в HTML-документ. Он подобен поддереву DOM, у которого все еще есть допустимое представление XML, которое поймут любой (не уверен, если есть, большинство) редакторы и зрители SVG.

Вы можете "эмулировать" холст с помощью SVG, , легко , установив svg или div + svg, а затем добавив все дочерние элементы к этому svg, и поскольку геометрические идеирисование на холсте и создание векторной графики не так уж отличаются , вы можете «мигрировать» к нему.

Совет здесь состоит в том, чтобы определить viewbox в SVG, как вы бы определилиразмеры холста, а затем вы можете сохранить свои единицы.(просто будьте осторожны с числами)

Кроме того, было бы проще прикрепить события к элементам SVG.

Если честно, учебник w3schools по SVG достаточно полонв остальном это просто хороший пример использования и использования их строительных блоков (с javascript)

Вот как вы бы создали элемент SVG для DOM.

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