cytoscape save graph as image by button

Question

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 wan

Answer 1

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())

Answer 2

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()