# 圖片與分隔線

> 向 PDF 頁面插入受管理圖片、更新圖片資源並加入向量分隔線。

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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

---

PDF 圖片是受管理的可編輯資源。URL、UUID、base64 字串或 blob 來源可使用 `insertImageAsync()`；分階段插入可使用分離式 builder。

## 插入圖片

```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()
```

自動來源偵測僅將絕對 `http` 和 `https` 位址識別為 URL。不接受相對 URL 路徑；請使用絕對 URL、有效的受管理資源 UUID 或 base64 資料。

## 使用圖片 builder

```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` 之間。