从画布元素中获取 SVG 并保存

2022-01-24 00:00:00 canvas save svg javascript

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

Currently I'm creating a small application for a friend, who´s starting his PhD and needs to build some network graphs. So far everything works fine using the a Force Directed graph. The graphs nodes can be moved to style the layout.

我无法理解的是:

»如何从画布中提取数据并将其保存到 SVG 文件中«.

我尝试了什么:

我已经尝试使用

What I tried:

I already tried accessing the image Data from the console with 

var app.canvas = document.getElementById( 'graph-canvas' )
    .getContext( '2d' )
        .getImageData( 0, 0, 200, 200 );

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

and got an (object) ImageData in return. Now I can access the ↑ shown canvas data with app.canvas.data. (When I try too look up the values, the browser starts hanging and asks if the script should be stopped - Chrome & FF latest).

我将如何从这里获取 SVG 并通过单击按钮进行保存?

How would I go from here to get the SVG drawn and then saved by the click of a button?

到目前为止，我发现了如何绘制 SVG 并向其添加 image/png 元素.但是，它没有显示.

So far I found out how to draw the SVG and add an image/png element to it. How ever, it´s not displaying.

// 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 和 Jit/InfoVIZ 库，所以这些都是可用的.

The UI works with jQuery UI, jQuery and the The Jit/InfoVIZ library, so those are available.

推荐答案

如果您想将其保留为矢量图形而不是栅格，您可以尝试将画布 API 操作转换为 svg 的库之一.

If you want to preserve it as a vector graphic instead of as a raster, you can try one of the libraries that translate the canvas API operations to 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);

完整运行示例以上.

对于 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());

完整运行示例以上.

改为生成 svg:

另一种选择当然是首先将图表制作为 svg，d3.js 是一个 javascript 库，可以很容易地做到这一点，参见例如 this example力有向图.

Another option is of course to make the graph as an svg in the first place, d3.js is a javascript library that makes it easy to do this, see e.g this example of a force directed graph.

相关文章