9

I saw in the cytoscape.js tutorial that there are ways to represent the graph as image (png, jpg), but there is a way to represent it as regular graph, and if the user would want he can save it as image by click on button or similar option?

Didn't find simple way for that.

I am using python flask as my server side and cytoscape js for the graphes.

Rimian
  • 34,695
  • 14
  • 111
  • 115
Avi
  • 93
  • 1
  • 4

2 Answers2

12

You don't need server side code to save files from the browser anymore.

You can save files using the saveAs() API in JS. Here's a polyfill: https://github.com/eligrey/FileSaver.js/

If you want the graph data, it would just be 

var jsonBlob = new Blob([ JSON.stringify( cy.json() ) ], { type: 'application/javascript;charset=utf-8' });

saveAs( jsonBlob, 'graph.json' );

Or for images

var b64key = 'base64,';
var b64 = cy.png().substring( content.indexOf(b64key) + b64key.length );
var imgBlob = base64ToBlob( b64, 'image/png' );

saveAs( imgBlob, 'graph.png' );

(Refer to other question re. base64toBlob())

Community
  • 1
  • 1
maxkfranz
  • 11,212
  • 1
  • 24
  • 35
  • 3
    Thank, its work with tiny change, i replace the scondeline with this: 'var b64 = cy.png().substring( cy.png().indexOf(b64key) + b64key.length );' i.e before this little change the **"content"** was not define and it throw error. – Avi Aug 31 '16 at 11:33
  • 1
    For more info, you can export as jpg, png, or json with numerous options: http://js.cytoscape.org/#core/export – Josiah Oct 01 '18 at 18:53
3

Improving the answer marked as correct:

You can use saveAs() directly, simply do:

import { saveAs } from "file-saver"; //or require
...
saveAs(cy.png(), "graph.png");

No need to handle blob content, same goes for .jpg()

M.M
  • 2,054
  • 1
  • 19
  • 30