cytoscape 通过按钮将图形保存为图像

Question

我在 cytoscape.js 教程中看到有一些方法可以将图形表示为图像（png、jpg），但也有一种方法可以将其表示为常规图形，如果用户想要他可以通过单击按钮或类似选项将其另存为图像吗？

没有找到简单的方法。

我使用 python flask 作为我的服务器端，使用 cytoscape js 作为图形。

Answer 1

您不再需要服务器端代码来保存来自浏览器的文件。

您可以在 JS 中使用 saveAs() API 保存文件。这是一个 polyfill：https://github.com/eligrey/FileSaver.js/

如果你想要图表数据，那就是

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

saveAs( jsonBlob, 'graph.json' );

或图片

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

saveAs( imgBlob, 'graph.png' );

（参考其他问题base64toBlob()）

Answer 2

改进标记为正确的答案：

你可以直接使用saveAs()，只需做：

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

无需处理 blob 内容，.jpg()

也一样