Cytoscape如何通过按钮将图形保存为图片

Question

我在cytoscape.js教程中看到有一些将图形表示为图像（png、jpg）的方法，但是否有一种将其表示为常规图形的方式，并且如果用户想要，可以通过点击按钮或类似选项将其保存为图像呢？

没有找到简单的方法来实现。

我正在使用python flask作为我的服务器端和cytoscape js用于绘制图表。

- Avi

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()的内容)

- maxkfranz

---

谢谢，这个小改动起作用了。我用这行代码替换了第二行代码：'var b64 = cy.png().substring( cy.png().indexOf(b64key) + b64key.length );'。也就是说，在这个小改动之前，**"content"**没有被定义，会抛出错误。 - Avi

更多信息，请使用众多选项将其导出为jpg、png或json：http://js.cytoscape.org/#core/export - Josiah

Answer 2

提高被标记为正确答案的回答：

您可以直接使用saveAs()，只需执行以下操作：

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

不需要处理 blob 内容，对于 .jpg() 也是一样。

- M.M

---

谢谢。这应该被标记为正确。 - Crimson_Hawk

https://www.npmjs.com/package/file-saver - Crimson_Hawk

Answer 3

如果您想要一个不需要使用其他库的解决方案，这里有一个想法：

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

请注意，png() 函数参数的 output 属性可用于直接生成一个 Blob 对象。如果您使用值 blob-promise，则该函数将返回一个 Promise 而不是直接返回 Blob，因此您可以保持 UI 的非阻塞状态。

有关更多详细信息，请参见官方 cytoscape 文档。

- Georg Schwarz