Способ конвертировать холст HTML5 в SVG?

Question

Нужно конвертировать HTML5-холст в SVG для редактирования? Указатель будет оценен

Answer 1

Попробуйте canvas2svg.js .[ Демо ]

Я сам нуждался в этом и закончил тем, что написал для этого библиотеку.В то время другие библиотеки были немного редкими или не генерировали действительный SVG.

Основная концепция все та же.Вы создаете 2D-контекст фиктивного холста, а затем генерируете граф сцены SVG при вызове команд рисования холста.По сути, вы можете использовать одну и ту же функцию рисования.В зависимости от того, какой контекст вы передаете ему, вы либо рисуете на стандартный 2D-холст, либо генерируете документ SVG, который можно сериализовать.

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

В качестве быстрого примера:

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg

Answer 2

canvas-svg позволяет сохранять 2d http://code.google.com/p/canvas-svg/ вы можете сделать обратное с помощью canvg http://code.google.com/p/canvg/

Answer 3

Я думаю, что холст уже должен рисовать SVG для этого метода, но я нашел его в процессе создания кнопки загрузки SVG, также столкнулся с вопросом переполнения стека в том же поиске, полагая, что это может быть актуально ,

из https://bramp.github.io/js-sequence-diagrams/

около строки 200ish, но кто знает, что он может редактировать сайт в будущем

редактор - это просто элемент div, и для этого шума он просто упаковывает материал, из которого сгенерирован svg, в загруженный svg.

diagram_div - холст, на котором сидит собственно svg.

function(ev) {
  var svg = diagram_div.find('svg')[0];
  var width = parseInt(svg.width.baseVal.value);
  var height = parseInt(svg.height.baseVal.value);
  var data = editor.getValue();
  var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

  var a = $(this);
  a.attr("download", "diagram.svg"); // TODO I could put title here
  a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
}

Answer 4

См. Также http://code.google.com/p/html5-canvas-svg/

Fabric.js сообщает о наличии парсера «canvas-to-svg» и демонстрации, которая, по-видимому, конвертирует canvas в SVG . Хотя другие элементы работают, если вы используете элементы управления, а затем «Растеризовать холст в» SVG, у него действительно есть проблема с преобразованием изображения по умолчанию, поэтому вам нужно проверить, действительно ли он способен конвертировать необработанные холсты в SVG или только при создании элементов через редактор.