javascript - cytoscape save graph as image by button - Stack Overflow

admin管理员组

文章数量:1339193

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.

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.

• javascript
• html
• cytoscape.js
• cytoscape

Share Improve this question Follow edited Jun 26, 2018 at 4:45 Rimian 38.5k1717 gold badges125125 silver badges119119 bronze badges asked Aug 26, 2016 at 14:41 AviAvi 9311 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 13

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

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

If you want a solution without further library usage, here an idea:

const pngBlob = await cy.png({
  output: 'blob-promise',
});

const fileName = 'myfile.png';
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(pngBlob);
downloadLink.download = fileName;
downloadLink.click();

Note that the output property of the png() function parameter can be used to directly generate a Blob object. If you use the value blob-promise the function returns a promise instead of a blog directly, so you can keep your UI non-blocking.

See the official cytoscape docs for more details.

本文标签： javascriptcytoscape save graph as image by buttonStack Overflow