# 画像をキャプチャーする — Five SDK

明示的なブラウザー操作で Five SDK の描画フレームを PNG Blob に出力し、サイズとリソースを制限します。

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

現在の描画フレームを出力します。対象はシーンのピクセルで、DOM ラベル、周囲の操作、ページ本体は別レイヤーです。

<span id="run-the-example" class="docs-anchor-alias" aria-hidden="true"></span>

## サンプルを実行する

[スターター](https://developer.realsee.ai/ja/docs/five-sdk/quickstart) の **SDK examples** でシーンを待ち、キャプチャーを実行します。生成した PNG を取得し、現在の視点と比較します。

<span id="read-and-encode-the-frame" class="docs-anchor-alias" aria-hidden="true"></span>

## フレームを読み取って変換する

キャンバスが可視サイズになった後、明示的な操作から呼びます。補助関数は現在の寸法を取得し、`flipY` でピクセルを読み、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");
  });
}
```

ダウンロード用の object URL は置換時やアンマウント時に revoke します。大きいフレームはピクセルバッファー、画像、変換結果のメモリーを使うため、出力サイズを制限してください。

<span id="check-the-result" class="docs-anchor-alias" aria-hidden="true"></span>

## 結果を確認する

PNG の幅・高さが 0 でなく、現在の実シーンを含むことを確認します。空でない Blob だけでは不十分です。使用するモードとアセットの読み込み状態を確認してください。

これはブラウザー内の画像出力で、サーバーのスクリーンショットやパノラマ取得 API ではありません。非公開 Team シーンはアプリの認可・共有ルールに従ってください。

次は [React ライフサイクル](https://developer.realsee.ai/ja/docs/five-sdk/react-lifecycle) へ進みます。