流程图控件GoJS教程：如何在服务器上创建映像

对于许多应用程序来说，使用GoJS创建图的图像可能很有用，并且此页面详细介绍了此任务的一些选项。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新版

对于许多应用程序来说，使用GoJS创建图的图像可能很有用，并且此页面详细介绍了此任务的一些选项。

Puppeteer

Puppeteer是一个Node库，它提供了高级API来控制无头Chrome。我们可以使用它在服务器端创建图像。如果安装了Node和npm，则可以使用进行安装npm install puppeteer。

以下代码是使用Puppeteer的一个小示例。如果将JavaScript另存为puppet.js，并使用node（node createImage.js）运行它，它将演示如何创建两个图像：一个来自图gojs-screenshot.png，一个来自HTML页面，一个来自page-screenshot.png。样本中的图表代码与最小样本中的代码相同。

// This example loads the GoJS library then adds HTML from scratch and evaluates some JavaScript,// then creates a screenshot of Diagram with makeImageData, plus a screenshot of the page.const puppeteer = require('puppeteer');const fs = require('fs');const parseDataUrl = (dataUrl) => {  const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);  if (matches.length !== 3) {    throw new Error('Could not parse data URL.');  }  return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };};(async () => {  const browser = await puppeteer.launch();  const page = await browser.newPage();  // Point to a version of go.js, either a local file or one on the web at a CDN  await page.addScriptTag({    url: 'https://unpkg.com/gojs'    // path: '../../release/go.js'  });  // Create HTML for the page:  page.setContent('<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>');  // Set up a Diagram, and return the result of makeImageData:  const imageData = await page.evaluate(() => {    var $ = go.GraphObject.make;    var myDiagram = $(go.Diagram, "myDiagramDiv",      {        "animationManager.isEnabled": false,        "undoManager.isEnabled": true  // enable undo & redo      });    // define a simple Node template    myDiagram.nodeTemplate =      $(go.Node, "Auto",  // the Shape will go around the TextBlock        $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },          new go.Binding("fill", "color")),        $(go.TextBlock,          { margin: 8 },          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" }      ]);    return myDiagram.makeImageData();  });  // Output the GoJS makeImageData as a .png:  const { buffer } = parseDataUrl(imageData);  fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');  // Output a page screenshot  await page.screenshot({ path: 'page-screenshot.png' });  await browser.close();})();

您还可以使用Puppeteer来获取实时HTML页面并执行相同的操作：

// This example loads a web page with a GoJS diagram,// then creates a screenshot of the Diagram with makeImageData, plus a screenshot of the page.const puppeteer = require('puppeteer');const fs = require('fs');const parseDataUrl = (dataUrl) => {  const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);  if (matches.length !== 3) {    throw new Error('Could not parse data URL.');  }  return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };};(async () => {  const browser = await puppeteer.launch();  const page = await browser.newPage();  // This does not have to be a page on the web, it can be a localhost page, or file://  await page.goto('https://gojs.net/samples/orgChartEditor.html', {    waitUntil: 'networkidle2' // ensures images are loaded  });  const imageData = await page.evaluate(() => {    window.myDiagram.animationManager.stopAnimation();    return window.myDiagram.makeImageData({      background: window.myDiagram.div.style.backgroundColor    });  });  // Output the GoJS makeImageData as a .png:  const { buffer } = parseDataUrl(imageData);  fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');  // Output a page screenshot  await page.screenshot({ path: 'page-screenshot.png' });  await browser.close();})();

下载SVG文件

如果您希望用户下载SVG文件，则无需涉及Web服务器。请参阅样本最小SVG。请注意，该示例仅下载一个SVG文件，但是该文件可以覆盖整个文档。

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都