UNPKG

gojs/intro/serverSideImages.html

Version:

1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> Server-Side Images with GoJS -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135<h1>Creating Images on the Server</h1>
136<p>
It may be useful for many applications to create images of Diagrams with <b>GoJS</b>, and this page details some of the options for such a task.
138</p>
139<h2 id="Puppeteer">Puppeteer</h2>
140<p>
141
142<a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a> is a Node library which provides a high-level API to
143control headless Chrome. We can use it to create images server-side. If you have Node and npm installed you can
144install it with <code>npm install puppeteer</code>.
145
146<p>
147The following code is a small example using Puppeteer.
148If you saved the JavaScript as <code>puppet.js</code> and run it with node (<code>node createImage.js</code>)
149it demonstrate creating two images: One from the Diagram called <code>gojs-screenshot.png</code> and one of the HTML page
150called <code>page-screenshot.png</code>.
151The Diagram code in the sample is the same as that in the <a href="../samples/minimal.html">Minimal sample</a>.
152</p>
153
154<pre class="lang-js"><code>
155// This example loads the GoJS library then adds HTML from scratch and evaluates some JavaScript,
156// then creates a screenshot of Diagram with makeImageData, plus a screenshot of the page.
157
158const puppeteer = require('puppeteer');
159const fs = require('fs');
160
161const 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') };
167};
168
169(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
172
// 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'
});
178
// Create HTML for the page:
page.setContent('&lt;div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"&gt;&lt;/div&gt;');
181
// Set up a Diagram, and return the result of makeImageData:
const imageData = await page.evaluate(() => {
  var $ = go.GraphObject.make;
185
  var myDiagram = $(go.Diagram, "myDiagramDiv",
    {
      "animationManager.isEnabled": false,
      "undoManager.isEnabled": true  // enable undo &amp; redo
    });
191
  // 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"))
    );
201
  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" }
    ]);
216
  return myDiagram.makeImageData();
});
219
// Output the GoJS makeImageData as a .png:
const { buffer } = parseDataUrl(imageData);
fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');
223
// Output a page screenshot
await page.screenshot({ path: 'page-screenshot.png' });
await browser.close();
227})();
228</code></pre>
229
230<p>
You can also use Puppeteer to fetch live HTML pages and do the same operations:
232</p>
233
234
235<pre class="lang-js"><code>
236// This example loads a web page with a GoJS diagram,
237// then creates a screenshot of the Diagram with makeImageData, plus a screenshot of the page.
238
239const puppeteer = require('puppeteer');
240const fs = require('fs');
241
242const 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') };
248};
249
250(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
});
257
258
const imageData = await page.evaluate(() => {
  window.myDiagram.animationManager.stopAnimation();
  return window.myDiagram.makeImageData({
    background: window.myDiagram.div.style.backgroundColor
  });
});
265
// Output the GoJS makeImageData as a .png:
const { buffer } = parseDataUrl(imageData);
fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');
269
// Output a page screenshot
await page.screenshot({ path: 'page-screenshot.png' });
await browser.close();
273})();
274</code></pre>
275
276
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
287
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
350
            </ul>
          </li>
        </ul>
354
355
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
361</footer>  </body>
362
363<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
364<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
375
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
385</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
401</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> Server-Side Images with GoJS -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
30	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
41	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
42	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
43	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
44	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
45	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
46	`</ul>`
47	`</div>`
48	`</div>`
49	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
50	`</nav>`
51
52	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
53
54	`<div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">`
55	`<div class="flex-shrink-0 px-8 py-4">`
56	`<button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">`
57	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
58	`<path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
59	`<path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
60	`</svg>`
61	`</button>`
62	`</div>`
63	`<nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">`
64	`<a href="index.html">Basics</a>`
65	`<a href="buildingObjects.html">Building Parts</a>`
66	`<a href="usingModels.html">Using Models</a>`
67	`<a href="dataBinding.html">Data Binding</a>`
68	`<a href="react.html">GoJS with React</a>`
69	`<a href="angular.html">GoJS with Angular</a>`
70	`<a href="textBlocks.html">TextBlocks</a>`
71	`<a href="shapes.html">Shapes</a>`
72	`<a href="pictures.html">Pictures</a>`
73	`<a href="panels.html">Panels</a>`
74	`<a href="tablePanels.html">Table Panels</a>`
75	`<a href="brush.html">Brushes</a>`
76	`<a href="sizing.html">Sizing Objects</a>`
77	`<a href="itemArrays.html">Item Arrays</a>`
78	`<a href="changedEvents.html">Changed Events</a>`
79	`<a href="transactions.html">Transactions</a>`
80	`<a href="viewport.html">Coordinates</a>`
81	`<a href="initialView.html">Initial View</a>`
82	`<a href="collections.html">Collections</a>`
83	`<a href="links.html">Links</a>`
84	`<a href="linkLabels.html">Link Labels</a>`
85	`<a href="connectionPoints.html">Link Points</a>`
86	`<a href="ports.html">Ports</a>`
87	`<a href="nodes.html">Nodes</a>`
88	`<a href="debugging.html">Debugging</a>`
89	`<a href="layouts.html">Layouts</a>`
90	`<a href="trees.html">Trees</a>`
91	`<a href="subtrees.html">SubTrees</a>`
92	`<a href="groups.html">Groups</a>`
93	`<a href="subgraphs.html">SubGraphs</a>`
94	`<a href="sizedGroups.html">Sized Groups</a>`
95	`<a href="selection.html">Selection</a>`
96	`<a href="highlighting.html">Highlighting</a>`
97	`<a href="animation.html">Animation</a>`
98	`<a href="toolTips.html">ToolTips</a>`
99	`<a href="contextmenus.html">Context Menus</a>`
100	`<a href="events.html">Diagram Events</a>`
101	`<a href="tools.html">Tools</a>`
102	`<a href="commands.html">Commands</a>`
103	`<a href="permissions.html">Permissions</a>`
104	`<a href="validation.html">Validation</a>`
105	`<a href="HTMLInteraction.html">HTML Interaction</a>`
106	`<a href="layers.html">Layers & Z-ordering</a>`
107	`<a href="palette.html">Palette</a>`
108	`<a href="overview.html">Overview</a>`
109	`<a href="resizing.html">Resizing Diagrams</a>`
110	`<a href="replacingDeleting.html">Replacing and Deleting</a>`
111	`<a href="buttons.html">Buttons</a>`
112	`<a href="templateMaps.html">Template Maps</a>`
113	`<a href="legends.html">Legends and Titles</a>`
114	`<a href="extensions.html">Extensions</a>`
115	`<a href="geometry.html">Geometry Strings</a>`
116	`<a href="grids.html">Grid Patterns</a>`
117	`<a href="graduatedPanels.html">Graduated Panels</a>`
118	`<a href="makingImages.html">Diagram Images</a>`
119	`<a href="makingSVG.html">Diagram SVG</a>`
120	`<a href="printing.html">Printing</a>`
121	`<a href="serverSideImages.html">Server-side Images</a>`
122	`<a href="nodeScript.html">GoJS in Node.js</a>`
123	`<a href="testing.html">Testing</a>`
124	`<a href="storage.html">Storage</a>`
125	`<a href="performance.html">Performance</a>`
126	`<a href="source.html">Building from Source</a>`
127	`<a href="platforms.html">Platforms</a>`
128	`<a href="deployment.html">Deployment</a>`
129	`</nav>`
130	`</div>`
131	`<div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">`
132
133
134
135	`<h1>Creating Images on the Server</h1>`
136	`<p>`
137	`It may be useful for many applications to create images of Diagrams with <b>GoJS</b>, and this page details some of the options for such a task.`
138	`</p>`
139	`<h2 id="Puppeteer">Puppeteer</h2>`
140	`<p>`
141
142	`<a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a> is a Node library which provides a high-level API to`
143	`control headless Chrome. We can use it to create images server-side. If you have Node and npm installed you can`
144	`install it with <code>npm install puppeteer</code>.`
145
146	`<p>`
147	`The following code is a small example using Puppeteer.`
148	`If you saved the JavaScript as <code>puppet.js</code> and run it with node (<code>node createImage.js</code>)`
149	`it demonstrate creating two images: One from the Diagram called <code>gojs-screenshot.png</code> and one of the HTML page`
150	`called <code>page-screenshot.png</code>.`
151	`The Diagram code in the sample is the same as that in the <a href="../samples/minimal.html">Minimal sample</a>.`
152	`</p>`
153
154	`<pre class="lang-js"><code>`
155	`// This example loads the GoJS library then adds HTML from scratch and evaluates some JavaScript,`
156	`// then creates a screenshot of Diagram with makeImageData, plus a screenshot of the page.`
157
158	`const puppeteer = require('puppeteer');`
159	`const fs = require('fs');`
160
161	`const parseDataUrl = (dataUrl) => {`
162	`const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);`
163	`if (matches.length !== 3) {`
164	`throw new Error('Could not parse data URL.');`
165	`}`
166	`return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };`
167	`};`
168
169	`(async () => {`
170	`const browser = await puppeteer.launch();`
171	`const page = await browser.newPage();`
172
173	`// Point to a version of go.js, either a local file or one on the web at a CDN`
174	`await page.addScriptTag({`
175	`url: 'https://unpkg.com/gojs'`
176	`// path: '../../release/go.js'`
177	`});`
178
179	`// Create HTML for the page:`
180	`page.setContent('<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>');`
181
182	`// Set up a Diagram, and return the result of makeImageData:`
183	`const imageData = await page.evaluate(() => {`
184	`var $ = go.GraphObject.make;`
185
186	`var myDiagram = $(go.Diagram, "myDiagramDiv",`
187	`{`
188	`"animationManager.isEnabled": false,`
189	`"undoManager.isEnabled": true // enable undo & redo`
190	`});`
191
192	`// define a simple Node template`
193	`myDiagram.nodeTemplate =`
194	`$(go.Node, "Auto", // the Shape will go around the TextBlock`
195	`$(go.Shape, "RoundedRectangle", { strokeWidth: 0 },`
196	`new go.Binding("fill", "color")),`
197	`$(go.TextBlock,`
198	`{ margin: 8 },`
199	`new go.Binding("text", "key"))`
200	`);`
201
202	`myDiagram.model = new go.GraphLinksModel(`
203	`[`
204	`{ key: "Alpha", color: "lightblue" },`
205	`{ key: "Beta", color: "orange" },`
206	`{ key: "Gamma", color: "lightgreen" },`
207	`{ key: "Delta", color: "pink" }`
208	`],`
209	`[`
210	`{ from: "Alpha", to: "Beta" },`
211	`{ from: "Alpha", to: "Gamma" },`
212	`{ from: "Beta", to: "Beta" },`
213	`{ from: "Gamma", to: "Delta" },`
214	`{ from: "Delta", to: "Alpha" }`
215	`]);`
216
217	`return myDiagram.makeImageData();`
218	`});`
219
220	`// Output the GoJS makeImageData as a .png:`
221	`const { buffer } = parseDataUrl(imageData);`
222	`fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');`
223
224	`// Output a page screenshot`
225	`await page.screenshot({ path: 'page-screenshot.png' });`
226	`await browser.close();`
227	`})();`
228	`</code></pre>`
229
230	`<p>`
231	`You can also use Puppeteer to fetch live HTML pages and do the same operations:`
232	`</p>`
233
234
235	`<pre class="lang-js"><code>`
236	`// This example loads a web page with a GoJS diagram,`
237	`// then creates a screenshot of the Diagram with makeImageData, plus a screenshot of the page.`
238
239	`const puppeteer = require('puppeteer');`
240	`const fs = require('fs');`
241
242	`const parseDataUrl = (dataUrl) => {`
243	`const matches = dataUrl.match(/^data:(.+);base64,(.+)$/);`
244	`if (matches.length !== 3) {`
245	`throw new Error('Could not parse data URL.');`
246	`}`
247	`return { mime: matches[1], buffer: Buffer.from(matches[2], 'base64') };`
248	`};`
249
250	`(async () => {`
251	`const browser = await puppeteer.launch();`
252	`const page = await browser.newPage();`
253	`// This does not have to be a page on the web, it can be a localhost page, or file://`
254	`await page.goto('https://gojs.net/samples/orgChartEditor.html', {`
255	`waitUntil: 'networkidle2' // ensures images are loaded`
256	`});`
257
258
259	`const imageData = await page.evaluate(() => {`
260	`window.myDiagram.animationManager.stopAnimation();`
261	`return window.myDiagram.makeImageData({`
262	`background: window.myDiagram.div.style.backgroundColor`
263	`});`
264	`});`
265
266	`// Output the GoJS makeImageData as a .png:`
267	`const { buffer } = parseDataUrl(imageData);`
268	`fs.writeFileSync('diagram-screenshot.png', buffer, 'base64');`
269
270	`// Output a page screenshot`
271	`await page.screenshot({ path: 'page-screenshot.png' });`
272	`await browser.close();`
273	`})();`
274	`</code></pre>`
275
276
277	`</div>`
278	`</div>`
279
280	`<div class="bg-nwoods-primary">`
281	`<section class="max-w-screen-lg text-white container mx-auto py-2 px-12">`
282	`<p id="version" class="leading-none mb-2 my-4">GoJS</p>`
283	`</section>`
284	`</div><footer class="bg-nwoods-primary text-white">`
285	`<div class="container max-w-screen-lg mx-auto px-8">`
286	`<div class="w-full py-6">`
287
288	`<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">`
289	`<ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">`
290	`<li class="list-none row-span-2">`
291	`<h2 class="text-base font-semibold tracking-wide">GoJS</h2>`
292	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
293	`<li>`
294	`<a href="../samples/index.html">Samples</a>`
295	`</li>`
296	`<li>`
297	`<a href="../learn/index.html">Learn</a>`
298	`</li>`
299	`<li>`
300	`<a href="../intro/index.html">Intro</a>`
301	`</li>`
302	`<li>`
303	`<a href="../api/index.html">API</a>`
304	`</li>`
305	`<li>`
306	`<a href="../changelog.html">Changelog</a>`
307	`</li>`
308	`<li>`
309	`<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>`
310	`</li>`
311	`</ul>`
312	`</li>`
313	`<li class="list-none row-span-2">`
314	`<h2 class="text-base font-semibold tracking-wide">Support</h2>`
315	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
316	`<li>`
317	`<a href="https://www.nwoods.com/contact.html"`
318	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>`
319	`</li>`
320	`<li>`
321	`<a href="https://forum.nwoods.com/c/gojs">Forum</a>`
322	`</li>`
323	`<li>`
324	`<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>`
325	`</li>`
326	`<li>`
327	`<a href="https://www.nwoods.com/sales/index.html"`
328	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>`
329	`</li>`
330	`<li>`
331	`<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>`
332	`</li>`
333	`</ul>`
334	`</li>`
335	`<li class="list-none row-span-2">`
336	`<h2 class="text-base font-semibold tracking-wide">Company</h2>`
337	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
338	`<li>`
339	`<a href="https://www.nwoods.com">Northwoods</a>`
340	`</li>`
341	`<li>`
342	`<a href="https://www.nwoods.com/about.html">About Us</a>`
343	`</li>`
344	`<li>`
345	`<a href="https://www.nwoods.com/contact.html">Contact Us</a>`
346	`</li>`
347	`<li>`
348	`<a href="https://twitter.com/northwoodsgo">Twitter</a>`
349	`</li>`
350
351	`</ul>`
352	`</li>`
353	`</ul>`
354
355
356	`<p class="text-sm text-gray-100 md:mb-6">`
357	`Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>`
358	`</p>`
359	`</div>`
360	`</div>`
361	`</footer> </body>`
362
363	`<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>`
364	`<script>`
365	`window.dataLayer = window.dataLayer \|\| [];`
366	`function gtag(){dataLayer.push(arguments);}`
367	`gtag('js', new Date()); gtag('config', 'UA-1506307-5');`
368	`var getOutboundLink = function(url, label) {`
369	`gtag('event', 'click', {`
370	`'event_category': 'outbound',`
371	`'event_label': label,`
372	`'transport_type': 'beacon'`
373	`});`
374	`}`
375
376	`// topnav`
377	`var topButton = document.getElementById("topnavButton");`
378	`var topnavList = document.getElementById("topnavList");`
379	`topButton.addEventListener("click", function() {`
380	`this.classList.toggle("active");`
381	`topnavList.classList.toggle("hidden");`
382	`document.getElementById("topnavOpen").classList.toggle("hidden");`
383	`document.getElementById("topnavClosed").classList.toggle("hidden");`
384	`});`
385	`</script>`
386	`<script src="../assets/js/prism.js"></script>`
387	`<script src="../release/go.js"></script>`
388	`<script src="../assets/js/goDoc.js"></script>`
389	`<script>`
390	`document.addEventListener("DOMContentLoaded", function() {`
391	`if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;`
392	`if (window.goDoc) window.goDoc();`
393	`var d = window.diagrams;`
394	`for (var i = 0; i < d.length; i++) {`
395	`var dargs = d[i];`
396	`goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);`
397	`}`
398	`if (window.extra) window.extra();`
399	`});`
400	`</script>`
401	`</html>`