# 图片与分隔线

> 向 PDF 页面插入托管图片、更新图片资源并添加矢量分隔线。

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [pdfs/features/core/images-and-dividers.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/features/core/images-and-dividers.zh-CN.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` 之间。