將HTML5畫布轉換爲SVG的方法？

Question

需要將HTML5畫布轉換爲SVG進行編輯？ 指針可以理解

Answer 1

帆布SVG讓您保存2D http://code.google.com/p/canvas-svg/ 你可以做反向與canvg http://code.google.com/p/canvg/

Answer 2

參見http://code.google.com/p/html5-canvas-svg/

Fabric.js通告有一個「畫布到SVG」解析器，它有一個演示，顯然converts canvas to SVG。雖然其他項目如果使用控件然後「將畫布柵格化爲」SVG，但確實存在轉換默認圖像的問題，所以您必須檢查這是否實際上能夠將原始畫布轉換爲SVG，或者只能將原始畫布轉換爲SVG如果通過編輯器創建項目。

Answer 3

嘗試canvas2svg.js。 [Demo]

我碰到需要這個自己，並最終爲此寫了一個庫。當時，其他庫有點稀疏，或者沒有生成有效的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 4

我想在畫布上必須已經繪製此方法的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)); 
}