Edit Question - KnowledgeHub

Title Body

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. The thing I can't get my head around is: »how to extract the data from the canvas and save it to a SVG file« . 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 ); 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). How would I go from here to get the SVG drawn and then saved by the click of a button? EDIT: 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", "imag

Tags (comma-separated) Cancel