javascript - cytoscape 按按钮将图形另存为图像

Question

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

没有找到简单的方法。

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

Answer 1

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

saveAs()您可以使用JS中的 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()