canvas html5 存svg,javascript – 从画布元素获取SVG并保存

目前，我正在为一位朋友创建一个小型应用程序，他正在启动他的博士学位并需要构建一些网络图。到目前为止，使用Force Directed图表，一切正常。图形节点可以移动到样式的布局。

我不知道的事情是：

»how to extract the data from the canvas and save it to a SVG file«.

我试过的

我已经尝试从控制台访问图像数据

var app.canvas = document.getElementById( 'graph-canvas' )

.getContext( '2d' )

.getImageData( 0, 0, 200, 200 );

并得到一个(对象)ImageData作为回报。现在我可以使用app.canvas.data访问↑显示的画布数据。 (当我尝试查看这些值时，浏览器开始挂起，询问是否应该停止脚本 – Chrome和FF最新版本)。

如何从这里开始获取SVG绘制，然后点击按钮保存？

编辑：

到目前为止，我发现如何绘制SVG并添加一个image / png元素。如何，它不显示。

// Add the test SVG el:

var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );

svg.setAttribute( 'style', 'border: 1px solid black;' )

.setAttribute( 'width', '600' )

.setAttribute( 'height', '400' )

.setAttributeNS(

'http://www.w3.org/2000/xmlns/',

'xmlns:xlink',

'http://www.w3.org/1999/xlink'

);

// Call

importCanvas( document.getElementById( 'infovis-canvas' ), svg );

// Function: Add data to SVG

function importCanvas( sourceCanvas, targetSVG )

{

// get base64 encoded png data url from Canvas

var img_dataurl = sourceCanvas.toDataURL( "image/png" );

var svg_img = document.createElementNS(

"http://www.w3.org/2000/svg",

"image"

);

svg_img.setAttributeNS(

'http://www.w3.org/1999/xlink',

'xlink:href',

img_dataurl

);

jQuery( targetSVG.appendChild( svg_img ) )

.appendTo( '#graph-container' );

console.log( 'done' ); // Log & confirm

}

最后…

// ...resulting SVG element containing the image element