遇到这个问题太正常了——Cytoscape.js的图片导出依赖真实的浏览器渲染环境，jsdom只能模拟DOM结构，却没有完整的Canvas/SVG渲染能力，所以才会出现那些奇怪的错误。下面是两种可靠的解决方案，核心思路是用真实的无头浏览器来执行渲染和导出逻辑：

方案一：使用Puppeteer（无头Chrome） #

Puppeteer是Google官方的无头Chrome工具，能提供完整的浏览器环境，完美支持Cytoscape的渲染需求。

步骤1：安装依赖 #

先安装必要的包：

npm install cytoscape puppeteer cytoscape-markov-clustering

步骤2：编写后端代码 #

替换你原来的cytoGraph函数，用Puppeteer包裹Cytoscape的逻辑：

import puppeteer from 'puppeteer';
import { readCsv } from "../Helpers/ReadCsv.js";
import { getEles } from "../Helpers/GetEles.js";

export async function cytoGraph(params) {
    // 启动无头浏览器
    const browser = await puppeteer.launch({
        headless: 'new', // 新版无头模式，更接近真实Chrome
        args: ['--no-sandbox', '--disable-setuid-sandbox'] // 避免权限问题（可选）
    });
    const page = await browser.newPage();

    // 设置页面尺寸，确保Cytoscape有足够空间渲染
    await page.setViewport({ width: 1920, height: 1080 });

    try {
        // 读取CSV数据并转换为Cytoscape需要的元素格式
        const data = await readCsv("data.csv");
        const eles = getEles(data);

        // 在浏览器页面中执行Cytoscape的渲染和导出逻辑
        const imageBase64 = await page.evaluate(async (eles) => {
            // 动态引入Cytoscape和马尔可夫聚类扩展
            await import('https://cdn.jsdelivr.net/npm/cytoscape@3.29.0/dist/cytoscape.min.js');
            await import('https://cdn.jsdelivr.net/npm/cytoscape-markov-clustering@1.0.3/cytoscape-markov-clustering.min.js');

            // 创建Cytoscape容器
            const container = document.createElement('div');
            container.style.width = '1920px';
            container.style.height = '1080px';
            document.body.appendChild(container);

            // 初始化Cytoscape实例
            const cy = cytoscape({
                container: container,
                fit: true,
                padding: 30,
                centerGraph: true,
                elements: eles // 直接传入预处理好的元素
            });

            // 执行马尔可夫聚类
            cy.elements().markovClustering();

            // 导出为PNG图片（base64格式）
            return cy.png({ output: 'base64' });
        }, eles); // 把预处理好的元素数据传入页面上下文

        // 关闭浏览器并返回图片数据
        await browser.close();
        return `data:image/png;base64,${imageBase64}`; // 或直接返回base64字符串
    } catch (error) {
        console.error('渲染失败:', error);
        await browser.close();
        throw error;
    }
}

关键说明 #

• 我们把Cytoscape的核心逻辑放到page.evaluate中，因为这个函数会在真实的Chrome浏览器上下文执行，拥有完整的DOM、Canvas支持，不会出现无头实例的错误。
• 可以选择在页面中通过CDN引入Cytoscape，也可以把本地包打包后传入（适合离线环境）。
• cy.png()支持output: 'blob'或output: 'base64'，可根据API需求选择返回格式。

方案二：使用Playwright（更轻量的无头浏览器） #

如果你觉得Puppeteer的Chrome体积太大，可以尝试Playwright——它支持Chrome、Firefox、WebKit，体积更小，API也更简洁：

步骤1：安装依赖 #

npm install cytoscape playwright cytoscape-markov-clustering

步骤2：编写代码 #

import { chromium } from 'playwright';
import { readCsv } from "../Helpers/ReadCsv.js";
import { getEles } from "../Helpers/GetEles.js";

export async function cytoGraph(params) {
    const browser = await chromium.launch({ headless: true });
    const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });

    try {
        const data = await readCsv("data.csv");
        const eles = getEles(data);

        const imageBase64 = await page.evaluate(async (eles) => {
            await import('https://cdn.jsdelivr.net/npm/cytoscape@3.29.0/dist/cytoscape.min.js');
            await import('https://cdn.jsdelivr.net/npm/cytoscape-markov-clustering@1.0.3/cytoscape-markov-clustering.min.js');

            const container = document.createElement('div');
            container.style.width = '1920px';
            container.style.height = '1080px';
            document.body.appendChild(container);

            const cy = cytoscape({
                container: container,
                fit: true,
                padding: 30,
                centerGraph: true,
                elements: eles
            });

            cy.elements().markovClustering();

            return cy.png({ output: 'base64' });
        }, eles);

        await browser.close();
        return `data:image/png;base64,${imageBase64}`;
    } catch (error) {
        console.error('渲染失败:', error);
        await browser.close();
        throw error;
    }
}

为什么你的原方案失败？ #

• 无头实例错误：当你不提供真实的容器元素（或容器没有渲染环境）时，Cytoscape会判定为无头实例，无法执行图片导出。
• jsdom的TypeError：jsdom没有实现完整的Canvas API和元素布局计算，Cytoscape无法获取元素的bounding box（即bb对象），所以抛出Cannot read properties of undefined (reading 'h')。

注意事项 #

• 如果CSV数据很大，建议先在Node.js端预处理好，再传给浏览器上下文，避免重复计算。
• 首次运行Puppeteer/Playwright会下载对应的浏览器二进制文件，需确保网络通畅。
• 可以调整viewport和容器尺寸来控制导出图片的大小。

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