Converting Multiple Diagrams To One PNG

GoJS
1

We currently have some code that exports our GoJS (v2.3.2) diagram to a PNG:

function getImage(
  pedigree: go.Diagram,
  usePng: boolean,
  width: number = NaN,
  height: number = NaN,
  callback?: (data: string | Blob) => void
) {
  const mimetype = usePng ? "image/png" : "image/jpeg";
  const returnType = callback ? "blob" : undefined;

  let size = new go.Size(width, height);
  if (isNaN(width) && isNaN(height)) {
    size = pedigree.documentBounds.size;
  }

  return pedigree.makeImageData({
    background: "white",
    size,
    maxSize: new go.Size(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY),
    type: mimetype,
    returnType,
    callback,
  }) as string;
}

However, we have two GoJS diagrams in the page, a genogram and its legend. We’d like the PNG output to contain both of these diagrams. Is there a way in GoJS to achieve this?

2

If you want to produce a new image that is the same size as the larger image but includes the smaller image, it’s easiest to do your own rendering of the two images into a single Canvas.
CanvasRenderingContext2D: drawImage() method - Web APIs | MDN
Pixel manipulation with canvas - Web APIs | MDN

Of course you’ll need to know exactly where to draw that smaller image within the bigger one.

3

Ok got it, thanks Walter!