Node.js服务端使用GoJS生成图表时makeImageData返回null如何获取base64图数据

• Node.js无内置浏览器的DOM、Canvas实现，GoJS的makeImageData依赖Canvas原生的toDataURL能力生成base64图片，缺少对应环境支持时会直接返回null
• 原代码依赖自动触发的InitialLayoutCompleted事件，无DOM环境下该事件可能不会正常触发，导致渲染流程中断

• 安装运行所需的模拟环境依赖，执行命令：

npm install canvas jsdom

• 在引入gojs前，先初始化全局的DOM、Canvas环境，将jsdom的window、document对象和node-canvas的实现挂载到Node.js全局作用域

注意：必须先完成全局环境初始化，再引入gojs，否则GoJS会因找不到全局DOM对象无法正常运行

• 适配原有GoJS初始化代码：
  • 初始化Diagram时无需传入DOM容器字符串，可传null
  • 手动触发布局流程，等待布局完成后再执行makeImageData

// 先初始化DOM、Canvas环境
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><body></body>');
global.window = dom.window;
global.document = dom.window.document;
global.Canvas = require('canvas');

// 再引入GoJS
const go = require("gojs");
var $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, null, {
    viewSize: new go.Size(400, 400),
    layout: $(go.LayeredDigraphLayout)
});

myDiagram.nodeTemplate = $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
        new go.Binding("fill", "color")),
    $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
        new go.Binding("text", "key"))
);

myDiagram.model = new go.GraphLinksModel(
    [
        { key: "Alpha", color: "lightblue" },
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" },
        { key: "Delta", color: "pink" }
    ],
    [
        { from: "Alpha", to: "Beta" },
        { from: "Alpha", to: "Gamma" },
        { from: "Beta", to: "Beta" },
        { from: "Gamma", to: "Delta" },
        { from: "Delta", to: "Alpha" }
    ]);

myDiagram.addDiagramListener('InitialLayoutCompleted', () => {
    const base64Image = myDiagram.makeImageData({
        background: 'white',
        scale: 1,
        type: 'image/png'
    });
    console.log(base64Image); // 输出标准base64格式图片数据
});

// 手动触发强制布局，确保事件正常触发
myDiagram.layoutDiagram(true);

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