目前,我正在为一位 friend 创建一个小型应用程序,他正在开始攻读博士学位,需要构建一些网络图。到目前为止,使用力定向图一切正常。可以移动图形节点来设置布局样式。
我无法理解的事情是:
»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
访问 ↑ 显示的 Canvas 数据。 (当我尝试查找这些值时,浏览器开始挂起并询问是否应该停止脚本 - 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
<svg style="border: 1px solid black;" width="600" height="400" xlink="http://www.w3.org/1999/xlink"><image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAA(...)
<小时/>
UI 可与 jQuery UI、jQuery 和 The Jit/InfoVIZ 配合使用。库,所以这些都是可用的。
最佳答案
如果您想将其保留为矢量图形而不是栅格,您可以尝试将 canvas API 操作转换为 svg 的库之一。
对于SVGKit :
var svgkitContext = new SVGCanvas(150,150);
function draw(ctx) {
// ... normal canvas drawing commands go here ...
}
// draw to SVGKit canvas (svg) instead of canvasElement.getContext("2d")
draw(svgkitContext);
完全运行example以上。
对于canvas-svg :
var canvasSVGContext = new CanvasSVG.Deferred();
canvasSVGContext.wrapCanvas(document.querySelector("canvas"));
var canvasContext = document.querySelector("canvas").getContext("2d");
function draw(ctx) {
// ... normal canvas drawing commands go here ...
}
// draw to html5 canvas and record as svg at the same time
draw(canvasContext);
// append the svg result
var svg = document.appendChild(canvasContext.getSVG());
完全运行example以上。
改为生成 svg:
当然,另一个选择是首先将图形制作为 svg,d3.js是一个 javascript 库,可以轻松执行此操作,请参阅 this example力定向图。
关于javascript - 从canvas元素获取SVG并保存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10273516/