Server-side images of diagrams with pictures using PhantomJS

GoJS
6

Yes, it seems that PhantomJS suffers from the same problem. I’ve kludged together something that appears to work. Rather than build the web page on the fly as your example does, I’ve got a page on the web server that loads up the diagram and generates the image. Then PhantomJS loads up the page and saves the generated image. Looks like it will fix the issue. In case anyone else faces the same issue here is the HTML

And PhantomJS script

var page = require('webpage').create();
page.viewportSize = { width: 1024, height: 768 };
page.open("http://localhost/TestPhantom/HtmlPage1.html", function () {
  // We want to ensure that the image is done loading before we render
  setInterval(function () {
    var imgComplete = page.evaluate(function () {
      return (document.getElementById('myImg')).complete;
    });

    if (imgComplete) {
      // PhantomJS renders the entire page, and we just want to output the ,
      // so we must clip to its bounding rect:
      var clipRect = page.evaluate(function () {
        return document.getElementById('myImg').getBoundingClientRect();
      });
      page.clipRect = {
        top: clipRect.top,
        left: clipRect.left,
        width: clipRect.width,
        height: clipRect.height
      };
      page.render('myDiagramImage.png');
      phantom.exit();
    }
  }, 100);
});