Capture an image

Export the current renderer frame. This captures the scene's rendered pixels; DOM labels, surrounding controls and the rest of the webpage are separate layers.

Run the example#

Open SDK examples in the starter, wait for the scene to load, then choose its capture action. Download the generated PNG and compare it with the current view.

Read and encode the frame#

Call from an explicit user action after the canvas has a visible size. The helper obtains the current size, reads pixels with flipY, and encodes a PNG Blob.

import type { Five } from "@realsee/five";
import { Vector2 } from "three";

/** Call after load, from an explicit capture action, rather than each frame. */
export async function captureImage(five: Five): Promise<Blob> {
  const size = five.getSize(new Vector2());
  const width = Math.floor(size.x);
  const height = Math.floor(size.y);
  if (width < 1 || height < 1) throw new Error("The canvas has no visible size.");
  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext("2d");
  if (!context) throw new Error("Canvas 2D is unavailable.");
  const image = context.createImageData(width, height);
  five.getPixels({
    x: 0,
    y: 0,
    width,
    height,
    pixelRatio: 1,
    flipY: true,
    buffer: image.data,
  });
  context.putImageData(image, 0, 0);
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) resolve(blob);
      else reject(new Error("PNG encoding failed."));
    }, "image/png");
  });
}

If you create an object URL to offer the Blob as a download, revoke the old URL when it is replaced or the component unmounts. Keep the export size bounded: large frames allocate a pixel buffer, an image and an encoded result.

Check the result#

The PNG has nonzero dimensions and contains the actual current scene. A nonempty Blob alone is not proof of correct pixels. Test the intended panorama or model mode and asset-loading state before using captures in a product workflow.

This is an in-browser image export, not a server screenshot service or a panorama-image download API. Follow your application's data authorization and sharing rules for private Team scenes.

Continue with React lifecycle.