PDF 中的产品图、截图、图表和印章等图片常需要更新或复用：往 PDF 中插入新的图片、把旧 Logo 替换为新 Logo、删除过时的插图、或把 PDF 中的图片提取出来用于其他文档。由于 PDF 版式固定，直接用编辑器修改这些图片往往非常困难。

Spire.PDF for JavaScript 基于 WebAssembly 在浏览器端直接处理 PDF 文档，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。借助 PdfImage、页面画布的 DrawImage 方法以及 PdfImageHelper 帮助类，您可以轻松完成对 PDF 图片的添加、替换、删除与提取。

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

• 向 PDF 添加图片
• 替换 PDF 中的图片
• 删除 PDF 中的图片
• 提取 PDF 中的图片

有关安装和项目配置，请参考 React 项目中集成 Spire.PDF for JavaScript。以下示例默认已安装 Spire.PDF 并完成 WebAssembly 模块初始化。

向 PDF 添加图片

添加图片是最常见的图片操作之一。核心思路是：先通过 PdfImage.FromFile 方法加载图片文件，再使用页面画布（Canvas）的 DrawImage 方法在页面的指定位置以指定尺寸绘制图片。其中 x、y 参数确定图片左上角的坐标，width、height 参数确定图片的显示尺寸。既可以向现有文档的指定页面添加图片，也可以像下面的示例那样在新建的空白文档中绘制图片。

function App() {
  const addImageToPdf = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

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

    // 将图片载入 VFS
    const inputImageName = 'TreePic.png';
    await window.spire.FetchFileToVFS(inputImageName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象
    let doc = new pdfModule.PdfDocument();

    // 添加一页
    let page = doc.Pages.Add();

    // 加载图片，并按比例缩放显示尺寸
    let image = pdfModule.PdfImage.FromFile(inputImageName);
    let width = image.Width * 0.6;
    let height = image.Height * 0.6;

    // 计算水平居中位置，并设置垂直位置
    let x = (page.Canvas.ClientSize.Width - width) / 2;
    let y = 60;

    // 在页面的指定位置绘制图片
    page.Canvas.DrawImage({ image: image, x: x, y: y, width: width, height: height });

    // 定义为 PDF 格式的输出文件名
    const outputFileName = '添加图片.pdf';

    // 保存为 PDF 格式
    doc.SaveToFile({ fileName: outputFileName });
    doc.Close();

    // 从 VFS 读取生成的 PDF 文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>Add Image To PDF</h1>
      <button onClick={addImageToPdf}>
        Generate
      </button>
    </div>
  );
}

export default App;

添加图片后生成的 PDF 文档

替换 PDF 中的图片

替换图片是指在保持原图片位置与占位尺寸不变的前提下，将页面中的某张图片内容替换为新图片。首先通过 PdfImageHelper 的 GetImagesInfo 方法获取页面上的图片信息数组，然后加载新图片，再调用 ReplaceImage 方法把指定索引的图片替换为新图片。替换后新图片会自动沿用原图片在页面上的位置与大小，页面整体版式保持不变。

function App() {
  const replaceImageInPdf = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

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

    // 将 PDF 文件载入 VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 将用于替换的新图片载入 VFS
    const newImageName = 'ChartImage.png';
    await window.spire.FetchFileToVFS(newImageName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 获取第一页
    let page = doc.Pages.get_Item(0);

    // 创建 PdfImageHelper 对象，获取页面中的图片信息
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // 加载新图片，并替换页面中的第一张图片
    let newImage = pdfModule.PdfImage.FromFile(newImageName);
    helper.ReplaceImage(images[0], newImage);

    // 定义为 PDF 格式的输出文件名
    const outputFileName = '替换图片.pdf';

    // 保存为 PDF 格式
    doc.SaveToFile({ fileName: outputFileName });
    doc.Close();

    // 从 VFS 读取生成的 PDF 文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>Replace Image In PDF</h1>
      <button onClick={replaceImageInPdf}>
        Generate
      </button>
    </div>
  );
}

export default App;

替换图片后生成的 PDF 文档

删除 PDF 中的图片

删除图片是将 PDF 中不再需要的图片对象从页面中移除。与替换类似，先通过 PdfImageHelper 的 GetImagesInfo 方法获取页面上的图片信息数组，再调用 DeleteImage 方法并传入对应的图片信息对象，即可删除该图片。删除后原图片位置留空，页面上的文字、图形与整体版式不受影响。

function App() {
  const deleteImageFromPdf = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

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

    // 将 PDF 文件载入 VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 获取第一页
    let page = doc.Pages.get_Item(0);

    // 创建 PdfImageHelper 对象，获取页面中的图片信息
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // 删除页面中的第一张图片
    helper.DeleteImage({ imageInfo: images[0] });

    // 定义为 PDF 格式的输出文件名
    const outputFileName = '删除图片.pdf';

    // 保存为 PDF 格式
    doc.SaveToFile({ fileName: outputFileName });
    doc.Close();

    // 从 VFS 读取生成的 PDF 文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>Delete Image From PDF</h1>
      <button onClick={deleteImageFromPdf}>
        Generate
      </button>
    </div>
  );
}

export default App;

删除图片后生成的 PDF 文档

提取 PDF 中的图片

提取图片是把 PDF 页面中已有的图片导出为独立的图片文件，方便在其他文档或系统中复用。通过 PdfImageHelper 的 GetImagesInfo 方法获取图片信息数组后，逐一访问图片信息对象的 Image 属性，调用其 Save 方法把图片保存到 VFS，再从 VFS 读取文件并触发下载即可。提取操作是只读的，不会修改原 PDF 文档。

function App() {
  const extractImagesFromPdf = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

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

    // 将 PDF 文件载入 VFS
    const inputFileName = 'Business_Data_Overview_中文.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 获取第一页
    let page = doc.Pages.get_Item(0);

    // 创建 PdfImageHelper 对象，获取第一页中的图片信息
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // 遍历页面中的图片，逐一保存为独立的图片文件并触发下载
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `提取图片_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // 从 VFS 读取提取的图片文件，触发下载
      const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      a.click();
      URL.revokeObjectURL(url);
    }

    doc.Close();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Extract Images From PDF</h1>
      <button onClick={extractImagesFromPdf}>
        Generate
      </button>
    </div>
  );
}

export default App;

从 PDF 中提取出的图片文件

常见问题

如何定位要替换或删除的是哪一张图片

原因：GetImagesInfo 返回的是页面上所有图片的信息数组，数组顺序与图片在页面中的排列有关。

解决：可以通过数组索引访问特定图片，例如 images[0] 表示页面中的第一张图片；也可以读取图片信息对象的 Bounds 属性判断图片所在的区域，再结合位置筛选出目标图片。以下示例演示如何根据图片所在区域删除图片：

// 获取页面中的图片信息
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

// 遍历图片，删除落在指定区域内的图片
for (let i = 0; i < images.length; i++) {
  let rect = new pdfModule.RectangleF({ x: 100, y: 300, width: 30, height: 40 });
  if (images[i].Bounds.IntersectsWith({ rect: rect })) {
    helper.DeleteImage({ imageInfo: images[i] });
  }
}

添加图片时如何精确控制图片的位置与大小

原因：DrawImage 的坐标与尺寸参数直接决定图片在页面上的显示效果。

解决：x、y 为图片左上角的坐标，width、height 为显示尺寸。若希望按原始比例缩放，可先读取 image.Width 与 image.Height，再乘以缩放系数计算目标尺寸；若希望居中显示，可读取 page.Canvas.ClientSize.Width 计算水平坐标，例如 x = (page.Canvas.ClientSize.Width - width) / 2。

替换或删除图片会影响 PDF 中的文字和其他内容吗

原因：替换与删除操作只作用于图片对象本身。

解决：替换图片时新图片沿用原图片的位置与占位尺寸，页面其余内容不变；删除图片后原图片位置留空，页面上其余文字、图形与版式均不受影响。提取图片是只读操作，不会修改原文档。

获取免费许可证

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