Export as image

The @sigma/export-image package lets you export the current graph visualization as a PNG or JPEG file. It works by creating a temporary offscreen renderer, copying the current node/edge/graph states, and drawing the stage canvas onto a new output canvas.

import { downloadAsImage } from "@sigma/export-image";
import Sigma from "sigma";

import { getSmallGraph } from "../_data/small-graph";
import { registerControls } from "../_controls";

const container = document.getElementById("sigma-container") as HTMLElement;

const graph = getSmallGraph();

const { format, resetCamera } = registerControls({
  format: {
    type: "select",
    label: "Format",
    default: "png",
    options: [
      { label: "PNG", value: "png" },
      { label: "JPEG", value: "jpeg" },
    ],
  },
  resetCamera: { type: "boolean", label: "Reset camera", default: false },
  save: {
    type: "button",
    label: "Save image",
    action: () => {
      downloadAsImage(renderer, {
        format: format as "png" | "jpeg",
        fileName: "graph",
        backgroundColor: "#ffffff",
        cameraState: resetCamera ? { x: 0.5, y: 0.5, angle: 0, ratio: 1 } : undefined,
      });
    },
  },
});

const renderer = new Sigma(graph, container);

Result Source

View source Open

Installation

npm install @sigma/export-image

Download as image

The simplest way to export is downloadAsImage, which triggers a file download in the browser:

import { downloadAsImage } from "@sigma/export-image";

downloadAsImage(renderer, {
  fileName: "my-graph",
  format: "png",
  backgroundColor: "#ffffff",
});

There are also shorthand functions downloadAsPNG and downloadAsJPEG that lock the format:

import { downloadAsPNG } from "@sigma/export-image";

downloadAsPNG(renderer, { fileName: "my-graph", backgroundColor: "#ffffff" });

Options

Option	Type	Default	Description
fileName	string	"graph"	Output file name (without extension)
format	"png" | "jpeg"	"png"	Image format
backgroundColor	string	"transparent"	Background color
width	number | null	null	Output width in pixels (defaults to current renderer width)
height	number | null	null	Output height in pixels (defaults to current renderer height)
cameraState	CameraState | null	null	Override camera state (defaults to current renderer’s camera state)
sigmaOverrides	object	{}	Override primitives, styles, and/or settings for the export

Custom dimensions

Export at a higher resolution than the current viewport:

downloadAsImage(renderer, {
  width: 1920,
  height: 1080,
  backgroundColor: "#ffffff",
});

Drawing on canvas

For custom processing (like adding a watermark or feeding the image to another library), use drawOnCanvas to get the raw HTMLCanvasElement:

import { drawOnCanvas } from "@sigma/export-image";

const canvas = await drawOnCanvas(renderer, {
  backgroundColor: "#ffffff",
  width: 1920,
  height: 1080,
});

// Use the canvas for further processing:
const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.fillText("My Graph", 20, 30);

// Convert to blob manually:
canvas.toBlob((blob) => {
  // Upload, display, etc...
}, "image/png");

Using a middleware

The withTempRenderer callback gives you access to the temporary sigma instance before the stage canvas is drawn:

downloadAsImage(renderer, {
  withTempRenderer: async (tmpRenderer) => {
    // ...
  },
});