做产品介绍或季度汇报，经常要给幻灯片配图。单页配图可以逐页插入；想让每一页都带上公司标志，就得改幻灯片母版。在桌面软件里改母版，要先切到母版视图再对齐位置；交给服务端处理，文件又得先传出去。

本文用 Spire.Presentation for JavaScript 在浏览器里直接给 PowerPoint 添加图片。图片可以插到某一页幻灯片上，也可以加到幻灯片母版，让使用该母版的页面统一显示。整个过程基于 WebAssembly 在浏览器端完成，无需安装 Office，也不依赖后端，文件始终留在用户的设备上。

本文介绍两个核心功能点：

• 将图片插入到幻灯片
• 向幻灯片母版添加图片

有关安装和项目配置，请参考 React 项目中集成 Spire.Presentation for JavaScript。下面的示例假定 Spire.Presentation 已安装、WebAssembly 模块已初始化。

将图片插入到幻灯片

Spire.Presentation for JavaScript 提供 Shapes.AppendEmbedImage()，可以直接把图片添加到幻灯片。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入风景图片与字体，创建 Presentation 对象新建一份空白演示文稿。
3. 用 RectangleF.FromLTRB() 定义图片的矩形区域，四个值依次是左、上、右、下。
4. 在新建演示文稿自带的空白幻灯片上调用 Shapes.AppendEmbedImage()，传入 ShapeType.Rectangle、图片文件名与矩形，返回图片形状。
5. 保存结果文件，从 VFS 读出并触发浏览器下载。

将图片插入幻灯片的代码如下：

function App() {
  const insertPicture = async () => {
    // 获取 Spire.Presentation WASM 模块
    const pptModule = window.wasmModule?.spirepresentation;

    // 检查模块是否就绪
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // 载入图片与字体
    await window.spire.FetchFileToVFS('风景照片.png', "", `${process.env.PUBLIC_URL}/data/`);
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);

    // 新建空白演示文稿（自带一张空白幻灯片），并设为 16:9
    const ppt = new pptModule.Presentation();
    ppt.SlideSize.Type = pptModule.SlideSizeType.Screen16x9;

    // 矩形以磅为单位，原点在幻灯片左上角
    const rect = pptModule.RectangleF.FromLTRB(300, 135, 660, 405);

    // 在新建的空白幻灯片上追加图片形状
    const slide = ppt.Slides.get_Item(0);
    const picture = slide.Shapes.AppendEmbedImage({
      shapeType: pptModule.ShapeType.Rectangle,
      fileName: '风景照片.png',
      rectangle: rect,
    });

    // 去掉图片形状自带的边框
    picture.Line.FillType = pptModule.FillFormatType.None;

    // 保存结果文件
    const outputFileName = '插入图片后.pptx';
    ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
    ppt.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>将图片插入到幻灯片</h1>
      <button id="btn-1" onClick={insertPicture}>
        插入图片
      </button>
    </div>
  );
}

export default App;

图片已插入到幻灯片中央：

向幻灯片母版添加图片

Spire.Presentation for JavaScript 的幻灯片母版由 Presentation.Masters 管理。用 Shapes.AppendEmbedImage() 给母版添加图片，所有使用该母版的页面都会显示。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入徽标图片与字体，创建 Presentation 对象新建一份空白演示文稿。
3. 用 Presentation.Masters.get_Item(0) 取默认的幻灯片母版。
4. 用 RectangleF.FromLTRB() 定义图片区域，对母版的 Shapes 调用 AppendEmbedImage()，并去掉图片边框。
5. 调用 Slides.Append() 新增一页幻灯片，保存结果文件，从 VFS 读出并触发浏览器下载。

向幻灯片母版添加图片的代码如下：

function App() {
  const addImageToSlideMaster = async () => {
    // 获取 Spire.Presentation WASM 模块
    const pptModule = window.wasmModule?.spirepresentation;

    // 检查模块是否就绪
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // 载入徽标图片与字体
    await window.spire.FetchFileToVFS('徽标.png', "", `${process.env.PUBLIC_URL}/data/`);
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);

    // 新建空白演示文稿，并设为 16:9
    const ppt = new pptModule.Presentation();
    ppt.SlideSize.Type = pptModule.SlideSizeType.Screen16x9;

    // 取默认的幻灯片母版
    const master = ppt.Masters.get_Item(0);

    // 给母版追加图片形状，矩形以磅为单位
    const rect = pptModule.RectangleF.FromLTRB(40, 40, 130, 130);
    const picture = master.Shapes.AppendEmbedImage({
      shapeType: pptModule.ShapeType.Rectangle,
      fileName: '徽标.png',
      rectangle: rect,
    });

    // 去掉图片形状自带的边框
    picture.Line.FillFormat.FillType = pptModule.FillFormatType.None;

    // 新增一页幻灯片，查看母版图片的应用效果
    ppt.Slides.Append();

    // 保存结果文件
    const outputFileName = '母版添加图片后.pptx';
    ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
    ppt.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>向幻灯片母版添加图片</h1>
      <button id="btn-2" onClick={addImageToSlideMaster}>
        添加图片到母版
      </button>
    </div>
  );
}

export default App;

母版图片已应用到新增的幻灯片：

常见问题

图片插入后为什么出现在幻灯片的其他位置

RectangleF.FromLTRB() 的四个值以磅为单位，原点在幻灯片左上角，依次是左、上、右、下，不是宽和高。图片的左上角落在 (left, top)，大小由 right - left 与 bottom - top 决定。先按幻灯片尺寸换算坐标，16:9 的页面是 960 × 540 磅。

母版图片和普通图片有什么区别

母版上的图片属于版式的一部分，所有使用该母版的幻灯片都会显示，位置固定，在单页上不能单独选中或删除。普通图片只属于插入的那一页，可以单独移动和删除。

母版图片为什么被页面内容挡住

母版上的图片渲染在幻灯片内容的底层，页面上的文字、形状会盖在图片上面。把母版图片放在页面留白的位置，或者调整页面内容的布局。

一次可以添加多张图片吗

可以。每多一张图片就多调用一次 AppendEmbedImage()，幻灯片和母版都适用。同一页或同一母版放多张时，每次传入不同的 rectangle，避免叠在一起。输出还是一个 PPTX 文件，保存一次即可。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。