Styling, export and integration

PNG export

114 of 136

What is on screen, as an image

toPng draws a frame and reads it back, and resolves to a PNG as a Blob:

export async function exportPng(plot: Plot): Promise<{ url: string; bytes: number }> {
  // Draws a frame and reads it back: what is on screen, at device resolution.
  const blob = await plot.toPng();
  return { url: URL.createObjectURL(blob), bytes: blob.size };
}

It is the picture on the canvas: the same charts and scene from the same camera, whatever a reader has zoomed to, at the resolution of the screen it is on. On a display with two device pixels to a CSS pixel the image is twice the canvas' size each way, which the demonstration above prints when you press its key.

On the free tier the mark is in the image, because the image is what the plot drew.

Saving it

A Blob goes wherever a page wants it: into an img, to a server, or to the reader's disk through a link.

export function download(url: string, name: string): void {
  const link = document.createElement("a");
  link.href = url;
  link.download = name;
  link.click();
}

Release the object URL with URL.revokeObjectURL when the image is no longer shown.

When it rejects

The promise rejects when the browser will not hand the canvas back, which is what it does for a canvas with no size. A plot inside an element that is not displayed has none, so export while the plot is visible.