控件怎么显示服务器上的图片,流程图控件GoJS教程：如何在服务器上创建映像...

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

对于许多应用程序来说，使用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('

// 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正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com