# Capture an image — Five SDK

Read the rendered Five SDK frame into a PNG Blob from an explicit browser action, with size and resource limits.

Canonical: https://developer.realsee.ai/docs/five-sdk/capture-images
Source: https://developer.realsee.ai/docs/five-sdk/capture-images.md
Language: en

[Download examples](https://developer.realsee.ai/starters/react-five/1.3.0/starter.zip)

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](https://developer.realsee.ai/docs/five-sdk/quickstart), 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.

```ts title="starters/react-five/src/recipes/captureImage.ts"
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](https://developer.realsee.ai/docs/five-sdk/react-lifecycle).