# 画像と区切り線

> 管理対象画像の挿入、画像リソースの更新、PDF ページへのベクター区切り線の追加を行います。

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

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

---

PDF 画像は管理対象の編集可能リソースです。URL、UUID、base64 文字列、blob には `insertImageAsync()` を使い、段階的な挿入には切り離されたビルダーを使います。

## 画像を挿入する

```ts
const image = await page.insertImageAsync(
  'https://example.com/assets/signature.png',
  {
    left: 36,
    top: 36,
    width: 144,
    height: 72,
    opacity: 0.9,
  }
)

image.setRotation(-4).bringToFront()
```

自動判定で URL と認識されるのは絶対 `http` / `https` URL です。相対 URL パスは使用できません。絶対 URL、有効な管理対象リソース UUID、または base64 データを使用してください。

## 画像ビルダーを使う

```ts
const imageInfo = page
  .newImage()
  .setSource('https://example.com/assets/chart.png')
  .setAbsolutePosition(216, 36)
  .setSize(240, 135)
  .setOpacity(0.85)
  .build()

const chart = page.insertImage(imageInfo)
```

`build()` は切り離された操作で、PDF を変更しません。結果を `insertImage()` に渡します。既存の管理対象画像は、live なソース、変換、切り抜き、透明度の各メソッドで更新します。

## 区切り線を追加する

```ts
const divider = page.insertDivider({
  left: 36,
  top: 144,
  width: 420,
  strokeWidth: 1,
})

divider.setStroke({
  width: 2,
  color: '#3366ff',
})
```

区切り線の形状と線の長さは PDF ポイントです。`getStroke()` は切り離されたスナップショットを返し、`setStroke()` は形状を変えずに線を置き換えます。

`FPdfImage` は `getSource()`、`getImageSourceType()`、`setSource()`、`getCrop()`、`setCrop()`、`getOpacity()`、`setOpacity()`、`remove()` も提供します。透明度は `0` から `1` です。