流程圖控件GoJS教程：如何在服務(wù)器上創(chuàng)建映像

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

對(duì)于許多應(yīng)用程序來(lái)說(shuō)，使用GoJS創(chuàng)建圖的圖像可能很有用，并且此頁(yè)面詳細(xì)介紹了此任務(wù)的一些選項(xiàng)。

Puppeteer

Puppeteer是一個(gè)Node庫(kù)，它提供了高級(jí)API來(lái)控制無(wú)頭Chrome。我們可以使用它在服務(wù)器端創(chuàng)建圖像。如果安裝了Node和npm，則可以使用進(jìn)行安裝npm install puppeteer。

以下代碼是使用Puppeteer的一個(gè)小示例。如果將JavaScript另存為puppet.js，并使用node（node createImage.js）運(yùn)行它，它將演示如何創(chuàng)建兩個(gè)圖像：一個(gè)來(lái)自圖gojs-screenshot.png，一個(gè)來(lái)自HTML頁(yè)面，一個(gè)來(lái)自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();
})();

// 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文件

如果您希望用戶(hù)下載SVG文件，則無(wú)需涉及Web服務(wù)器。請(qǐng)參閱樣本最小SVG。請(qǐng)注意，該示例僅下載一個(gè)SVG文件，但是該文件可以覆蓋整個(gè)文檔。