如何将Cytoscape.js图导出为图片？出现null和DOMException错误如何解决？

• 语法错误：你提供的导出代码末尾多了一个多余的右括号)，会导致代码运行异常
• DOM执行顺序问题：如果你的JS代码执行时机早于<img id="png-eg">元素的渲染时机，document.querySelector('#png-eg')就会找不到对应元素返回null，哪怕你确实在HTML里写了这个元素
• 给非img元素设置src属性无效：你给挂载Cytoscape的div（id为cy的元素）设置src属性不会生效，src是img标签的专属属性，div不会渲染该属性对应的图片
• 控制台直接输出base64报错：Cytoscape导出的png是Base64格式的长字符串，直接输出到控制台会触发控制台的字符解析限制，导致字符异常报错

1. 先在HTML的body标签内，你想要展示导出图片的位置，插入img元素：

<img id="png-eg" alt="导出的网络图" style="max-width: 500px; margin: 20px 0;">

2. 修正你的JS代码，删除多余的右括号，同时将导出逻辑放到DOM加载完成的回调中，确保执行时目标img元素已经存在：

// 等待页面所有DOM元素渲染完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 这里保留你原有初始化Cytoscape实例的代码
  // 示例：const cy = cytoscape({ /* 你的原有配置 */ });

  // 导出PNG并赋值给img元素
  const png64 = cy.png();
  document.querySelector('#png-eg').setAttribute('src', png64);
})

3. 如果需要在控制台临时测试导出效果，可以直接运行以下代码打开/下载导出的图片，避免直接输出Base64字符串报错：

// 直接在新标签页打开导出的图片
window.open(cy.png())

// 直接下载导出的图片到本地
const a = document.createElement('a');
a.download = '网络图导出.png';
a.href = cy.png();
a.click();

内容的提问来源于stack exchange，提问作者Ooker