Phantomjs can't use makeImageData method to export gojs diagram which have go.picture

[northwoodssoftware]

Phantomjs can't use makeImageData method to export gojs diagram which have go.picture

[WalterNorthwoods]

We'll investigate this after the holidays.

[simonsarris]

We are de-emphasizing PhantomJS (Headless WebKit) in favor of puppeteer (Headless Chrome), which should be able to render images. Here is an example.

You will need to install node, npm, and puppeteer. Then run it with:

node puppet.js

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();
  });

  // Output the GoJS makeImageData as a .png:
  const { buffer } = parseDataUrl(imageData);
  fs.writeFileSync('gojs-screenshot.png', buffer, 'base64');

  // Output a page screenshot
  await page.screenshot({ path: 'page-screenshot.png' });
  await browser.close();
})();