# 画像とグループ

- Human documentation: [https://docs.univer.ai/ja-JP/guides/slides/features/core/images-and-groups](https://docs.univer.ai/ja-JP/guides/slides/features/core/images-and-groups)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/slides/features/core/images-and-groups.md](https://docs.univer.ai/ja-JP/guides/slides/features/core/images-and-groups.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [slides/features/core/images-and-groups.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/core/images-and-groups.ja-JP.mdx)

---

画像はスライドの第一級要素です。URL や Blob には非同期ヘルパーを使い、すべての画像プロパティが分かっている場合はビルダーを使用します。

## 画像を挿入する

```ts
const slide = univerAPI.getActivePresentation()?.getActiveSlide()

if (!slide) {
  throw new Error('No active slide')
}

const image = await slide.insertImageAsync(
  'https://example.com/assets/diagram.png',
  {
    imageSourceType: univerAPI.Enum.ImageSourceType.URL,
    left: 80,
    top: 120,
    width: 320,
    height: 180,
  }
)
```

`getImages()` は現在のスライド上の画像を返します。既存画像の更新には `setSource()`、`setCrop()`、`setClipShape()`、`toBuilder()` を使い、削除には `removeImage()` を使用します。

## 要素をグループ化する

```ts
const shape = slide.getShapes()[0]

if (shape) {
  const group = slide.group([shape, image])
  const children = group.getChildren()

  // 子要素をスライドに戻します。
  slide.ungroup(group)
}
```

グループは子要素の順序を保ち、他のページ要素と同じ変形、表示、名前、説明のメソッドを提供します。`getGroups()` は最上位グループを列挙します。