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

Ответ 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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

от https://bramp.github.io/js-sequence-diagrams/

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

editor - это просто элемент 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));
}