如何将 Cytoscape.js 图表导出为图像？

Question

我正在学习Cytoscape.js。我成功地制作了一个包含 this basic graph 的 HTML 文件。我尝试使用以下方法将图形导出为图像：

var png64 = cy.png();

// put the png data in an img tag
document.querySelector('#png-eg').setAttribute('src', png64);)

并得到错误

Uncaught TypeError: document.querySelector(...) is null
    <anonymous> debugger eval code:1
debugger eval code:1:10

有这个postUncaught TypeError: Cannot read property 'value' of null但是我不明白。我怀疑这只是没有声明 id #png-eg 的元素。但是，当我用其他带有 id 的声明元素替换它时——它们是 cy（显示图形）、a、b、ab（节点和边）——唯一不产生错误的元素是 cy。但即使那样我也不知道图像在哪里。

我尝试在正文中添加此元素 <img id="png-eg" src="">，但它仍然不起作用。空错误仍然发生。（但如果我不在脚本中包含 cy.png() 而是在控制台中键入，则错误为 Uncaught DOMException: String contains an invalid character）。

在示例中有一行 window.cy，所以我尝试在控制台中运行。我得到 Object { _private: {…} }

Answer 1

如果您有以下内容（确保在尝试查询元素之前加载 DOM）：

HTML:

<div id="cy"></div>

<button>Render PNG</button>

CSS:

#cy {
  width: 320px;
  height: 320px;
}

JS:

const cy = cytoscape({
  container: document.getElementById('cy'),
  // and the rest of the example you already have
})

const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  const base64URI = cy.png();
  const img = document.createElement('img');
  img.src = base64URI;

  document.body.appendChild(img);
});

这将创建一个新的图像元素并使其源等于 Cytoscape 导出的 base64 PNG 表示。然后该元素将被添加到 DOM，您可以看到图像标签内呈现的图形的快照。

你可以在StackBlitz上看到整个例子。

如何将 Cytoscape.js 图表导出为图像？

How to export a Cytoscape.js graph to image?

javascript

cytoscape.js

console.log