PPTX
图片
嵌入图片、设置幻灯片背景以及在形状上使用图片填充
@office-open/pptx 支持将图片嵌入幻灯片、设置背景图片以及将图片用作形状填充。
data 字段接受原始字节（Uint8Array、ArrayBuffer、Buffer），也支持 base64 data URL（如 data:image/png;base64,...）。在 JSON 或浏览器环境中没有磁盘文件时，使用 data URL 最为方便。
#嵌入图片
import { generatePresentation } from "@office-open/pptx";
{
"slides": [
{
"children": [
{
"picture": {
"x": "1.3cm",
"y": "1.3cm",
"width": "10.6cm",
"height": "7.9cm",
"data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAFoCAIAAABIUN0GAAAGFklEQVR4nO3OMQ3AQBAEseOPJwDD4rcYSwbgu/sAgOf2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAoP0AAIL2AwAI2g8AIGg/AICg/QAAgvYDAAjaDwAgaD8AgKD9AACC9gMACNoPACBoPwCAnB/XZ/UJD/Bi1wAAAABJRU5ErkJggg==",
"type": "png"
}
}
]
}
]
}
{
children: [
{
picture: {
x: "1.3cm",
y: "1.3cm",
width: "10.6cm",
height: "7.9cm",
data: new Uint8Array(fs.readFileSync("photo.png")),
type: "png",
},
},
],
}
#从 URL 加载图片（浏览器）
import { generatePresentation } from "@office-open/pptx";
import * as fs from "node:fs";
const response = await fetch("https://example.com/image.png");
const arrayBuffer = await response.arrayBuffer();
const data = new Uint8Array(arrayBuffer);
// 在 generatePresentation 中使用：
generatePresentation({
slides: [
{
children: [
{
picture: {
x: "1.3cm",
y: "1.3cm",
width: "13.2cm",
height: "7.9cm",
data,
type: "png",
},
},
],
},
],
});
#支持的图片类型
| 类型 | 扩展名 | type 值 |
|---|---|---|
| JPEG | .jpg / .jpeg | "jpg" |
| PNG | .png | "png" |
| GIF | .gif | "gif" |
| BMP | .bmp | "bmp" |
| EMF | .emf | "emf" |
| WMF | .wmf | "wmf" |
#幻灯片背景图片
为整张幻灯片设置背景图片：
{
"slides": [
{
"background": {
"fill": {
"type": "blip",
"data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
"imageType": "png"
}
},
"children": []
}
]
}
{
background: {
fill: {
type: "blip",
data: new Uint8Array(fs.readFileSync("background.png")),
imageType: "png",
},
},
children: [
// 幻灯片内容显示在背景之上
],
}
#纯色背景
{
"slides": [
{
"background": {
"fill": "1F4E79"
},
"children": []
}
]
}
{
background: { fill: "1F4E79" },
children: [],
}
#渐变背景
{
"slides": [
{
"background": {
"fill": {
"type": "gradient",
"stops": [
{
"position": 0,
"color": "0D47A1"
},
{
"position": 100,
"color": "42A5F5"
}
],
"angle": 45
}
},
"children": []
}
]
}
{
background: {
fill: {
type: "gradient",
stops: [
{ position: 0, color: "0D47A1" },
{ position: 100, color: "42A5F5" },
],
angle: 45,
},
},
children: [],
}
#形状上的图片填充（Blip Fill）
将图片用作任何形状的填充：
{
"slides": [
{
"children": [
{
"shape": {
"x": "1.3cm",
"y": "1.3cm",
"width": "15.9cm",
"height": "10.6cm",
"textBody": {
"text": "Text over image fill"
},
"properties": {
"geometry": "roundRect",
"fill": {
"type": "blip",
"data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
"imageType": "png"
}
}
}
}
]
}
]
}
{
children: [
{
shape: {
x: "1.3cm",
y: "1.3cm",
width: "15.9cm",
height: "10.6cm",
properties: {
geometry: "roundRect",
fill: {
type: "blip",
data: new Uint8Array(fs.readFileSync("texture.png")),
imageType: "png",
},
},
textBody: { text: "Text over image fill" },
},
},
],
}
#Picture 选项
| 属性 | 类型 | 说明 |
|---|---|---|
x | number | UniversalMeasure | 左侧位置 |
y | number | UniversalMeasure | 顶部位置 |
width | number | UniversalMeasure | 宽度 |
height | number | UniversalMeasure | 高度 |
data | Uint8Array | ArrayBuffer | string (data URL) | 图片数据（字节或 base64 data URL） |
type | "png" | "jpg" | "gif" | "bmp" | "emf" | "wmf" | 图片格式 |
name | string | cNvPr 显示名称 |
description | string | cNvPr 描述（无障碍 alt 文本） |
title | string | cNvPr 标题 |
hidden | boolean | 是否隐藏（默认 false） |