Un PDF que produjo el trimestre pasado aún circula internamente, pero a su logotipo se le cambió la marca el mes pasado y un gráfico muestra números que ya no son correctos. No quiere reconstruir el documento desde cero; solo necesita cambiar la imagen obsoleta por la nueva, o eliminar por completo un sello o marca de agua obsoletos.

Spire.PDF for JavaScript maneja ambas tareas en el navegador a través de su clase PdfImageHelper. La idea central es la misma para cualquiera de las dos operaciones: primero localizar la imagen en la página y luego actuar sobre ella. GetImagesInfo lee los metadatos de la imagen, ReplaceImage intercambia el contenido nuevo mientras conserva el lugar original, y DeleteImage elimina el objeto y deja el espacio en blanco. Sin servidor, sin carga, sin Adobe Acrobat.

En este artículo aprenderá a:

• Localizar cada imagen en una página con GetImagesInfo
• Reemplazar una imagen manteniendo su posición y tamaño originales
• Eliminar una imagen y dejar un espacio en blanco limpio
• Elegir la imagen correcta por su posición cuando no conoce su índice
• Limpiar imágenes en todas las páginas de un documento

---

Requisitos previos

Este tutorial asume que tiene un proyecto de React con Spire.PDF for JavaScript instalado y el módulo WASM inicializado. Si aún no lo ha configurado, siga Integrar Spire.PDF for JavaScript en un proyecto de React.

Necesitará:

• Un PDF que ya contenga al menos una imagen, cargado en el VFS
• (Para reemplazo) un nuevo archivo de imagen para intercambiar
• El módulo WASM accesible mediante window.wasmModule.spirepdf

---

Cómo localiza Spire.PDF las imágenes

Tanto el reemplazo como la eliminación comienzan con el mismo paso: determinar qué imágenes hay en la página y dónde se encuentran. El método PdfImageHelper.GetImagesInfo(page) devuelve una matriz de objetos de información de imágenes. Cada objeto expone:

• Image — los datos de la imagen en sí (se usan al reemplazar o al extraer imágenes del PDF)
• Bounds — un RectangleF que describe la posición y el tamaño de la imagen en la página

// Create a PdfImageHelper and inspect the first page
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

console.log(`Found ${images.length} image(s) on this page`);
for (let i = 0; i < images.length; i++) {
  console.log(`Image ${i}: position=(${images[i].Bounds.X}, ${images[i].Bounds.Y}), size=${images[i].Bounds.Width}x${images[i].Bounds.Height}`);
}

El índice de la matriz sigue el orden en que las imágenes aparecen en la página, por lo que images[0] es la primera, images[1] la segunda, y así sucesivamente. Una vez que tenga esta matriz, reemplazar o eliminar es una sola llamada a método, que se cubre en las siguientes dos secciones.

---

Reemplazar una imagen

Reemplazar mantiene intacto el diseño del documento: la nueva imagen hereda la posición y el tamaño del marcador de posición originales, por lo que nada a su alrededor se desplaza. Los pasos son: cargar el PDF y la imagen de reemplazo en el VFS, abrir el PDF, llamar a GetImagesInfo y luego llamar a ReplaceImage con el objeto de información de destino y la nueva imagen.

function App() {
  const replaceImageInPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Load the new image used for replacement into VFS
    const newImageName = 'ChartImage.png';
    await window.spire.FetchFileToVFS(newImageName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Load the new image and replace the first image on the page
    let newImage = pdfModule.PdfImage.FromFile(newImageName);
    helper.ReplaceImage(images[0], newImage);

    // Define the output file name in PDF format
    const outputFileName = 'ReplaceImage.pdf';

    // Save as PDF format
    doc.SaveToFile({ fileName: outputFileName });
    doc.Close();

    // Read the generated PDF file from VFS and trigger download
    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;

Documento PDF generado después de reemplazar una imagen

helper.ReplaceImage(images[0], newImage) intercambia el contenido de la imagen en el índice 0 por newImage. El intercambio ocurre en la misma posición y con las mismas dimensiones que la original. Si el reemplazo tiene una relación de aspecto diferente, se estira para ajustarse al marcador de posición original.

---

Eliminar una imagen

Eliminar comparte exactamente la misma configuración que reemplazar: cargue el PDF, obtenga la página, llame a GetImagesInfo. La única diferencia es la llamada final: en lugar de ReplaceImage, llama a DeleteImage con el objeto de información de destino, y la imagen se elimina por completo, dejando su espacio en blanco.

// Everything above is identical to the replace example:
// load the PDF, get page 0, create the helper, call GetImagesInfo(page)

// Delete the first image on the page
helper.DeleteImage({ imageInfo: images[0] });

Documento PDF generado después de eliminar una imagen

helper.DeleteImage({ imageInfo: images[0] }) elimina la imagen en el índice 0. El texto, los gráficos y el diseño circundantes no se modifican: el espacio que ocupaba simplemente se deja vacío, sin redistribución.

---

Seleccionar imágenes por posición

Cuando una página contiene varias imágenes, es posible que no sepa qué índice de la matriz es el que desea. La propiedad Bounds le indica dónde se encuentra cada imagen, e IntersectsWith le permite actuar sobre imágenes dentro de una región específica; resulta útil para borrar un sello de encabezado o cambiar un gráfico que siempre queda en el mismo lugar.

// Get the image information on the page
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

// Define the target region (e.g., a stamp area in the bottom-right)
let targetRect = new pdfModule.RectangleF({ x: 400, y: 700, width: 100, height: 80 });

// Iterate through the images and delete those within the target region
for (let i = 0; i < images.length; i++) {
  if (images[i].Bounds.IntersectsWith({ rect: targetRect })) {
    helper.DeleteImage({ imageInfo: images[i] });
    console.log(`Deleted image at position (${images[i].Bounds.X}, ${images[i].Bounds.Y})`);
  }
}

Bounds es un RectangleF con X, Y, Width y Height, todos en puntos (1 punto = 1/72 pulgada). El origen (0, 0) es la esquina superior izquierda de la página.

---

Procesar por lotes en todas las páginas

Para actuar sobre imágenes en todo un documento de varias páginas, recorra la colección Pages y ejecute la misma lógica por página. El ejemplo siguiente elimina todas las imágenes; cambie DeleteImage por ReplaceImage para reemplazar por lotes en su lugar (cargue la nueva imagen una vez antes del bucle).

const batchDeleteAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();

  // Loop through all pages
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Delete all images on this page
    for (let i = 0; i < images.length; i++) {
      helper.DeleteImage({ imageInfo: images[i] });
    }
    console.log(`Page ${pageIndex + 1}: deleted ${images.length} image(s)`);
  }

  const outputFileName = 'AllImagesDeleted.pdf';
  doc.SaveToFile({ fileName: outputFileName });
  doc.Close();

  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);
};

---

Preguntas frecuentes

¿Cómo encuentro la imagen específica que quiero cambiar?

GetImagesInfo devuelve las imágenes en el orden de la página, por lo que images[0], images[1], … le dan la primera, la segunda, etc. Cuando el orden no es obvio, lea la propiedad Bounds de cada objeto para ver dónde se encuentra, y use Bounds.IntersectsWith para hacer coincidir imágenes dentro de una región conocida. Consulte Seleccionar imágenes por posición arriba.

¿Reemplazar o eliminar altera el resto de la página?

No. Ambas operaciones tocan únicamente el objeto de imagen en sí. Un reemplazo conserva la posición original y el tamaño del marcador de posición; una eliminación deja un hueco en blanco. El texto, los gráficos y el diseño no se ven afectados, y el documento nunca se redistribuye.

¿Puedo reemplazar una imagen por otra que tenga una relación de aspecto diferente?

Sí; ReplaceImage estira la nueva imagen para llenar el marcador de posición original. Si necesita conservar las proporciones de la nueva imagen, elimine la anterior y agregue el reemplazo con DrawImage en el tamaño exacto que desee. Consulte Cómo agregar imágenes a un PDF en JavaScript (React).

¿Cómo elimino todas las imágenes de un documento?

Recorra doc.Pages.Count, llame a GetImagesInfo por página y DeleteImage en cada entrada; el ejemplo Procesar por lotes en todas las páginas muestra el código completo.

---

Véase también

• Cómo agregar imágenes a un PDF en JavaScript (React)
• Extraer imágenes de un PDF en JavaScript (React)
• Integrar Spire.PDF for JavaScript en un proyecto de React
• Página del producto Spire.PDF for JavaScript

Ein PDF, das Sie im letzten Quartal erstellt haben, zirkuliert noch intern, aber sein Logo wurde letzten Monat neu gebrandet und ein Diagramm zeigt Zahlen, die nicht mehr stimmen. Sie möchten das Dokument nicht von Grund auf neu erstellen – Sie müssen nur das veraltete Bild gegen das neue austauschen oder einen veralteten Stempel oder ein Wasserzeichen vollständig entfernen.

Spire.PDF for JavaScript erledigt beide Aufgaben im Browser über seine PdfImageHelper-Klasse. Der Grundgedanke ist bei beiden Vorgängen derselbe: Zuerst das Bild auf der Seite lokalisieren, dann darauf einwirken. GetImagesInfo liest die Bildmetadaten, ReplaceImage tauscht neuen Inhalt ein, während die ursprüngliche Position erhalten bleibt, und DeleteImage entfernt das Objekt und lässt den Bereich leer. Kein Server, kein Upload, kein Adobe Acrobat.

In diesem Artikel erfahren Sie, wie Sie:

• Jedes Bild auf einer Seite mit GetImagesInfo lokalisieren
• Ein Bild ersetzen und dabei seine ursprüngliche Position und Größe beibehalten
• Ein Bild löschen und einen sauberen leeren Bereich hinterlassen
• Das richtige Bild anhand seiner Position auswählen, wenn Sie seinen Index nicht kennen
• Bilder auf allen Seiten eines Dokuments bereinigen

---

Voraussetzungen

Diese exemplarische Vorgehensweise setzt voraus, dass Sie über ein React-Projekt mit installiertem Spire.PDF for JavaScript und initialisiertem WASM-Modul verfügen. Wenn Sie das noch nicht eingerichtet haben, folgen Sie der Anleitung Spire.PDF for JavaScript in ein React-Projekt integrieren.

Sie benötigen:

• Ein PDF, das bereits mindestens ein Bild enthält und in das VFS geladen wurde
• (Für das Ersetzen) eine neue Bilddatei zum Austauschen
• Das WASM-Modul, erreichbar über window.wasmModule.spirepdf

---

Wie Spire.PDF Bilder lokalisiert

Sowohl Ersetzen als auch Löschen beginnen mit demselben Schritt: herauszufinden, welche Bilder sich auf der Seite befinden und wo sie liegen. Die Methode PdfImageHelper.GetImagesInfo(page) gibt ein Array von Bildinformationsobjekten zurück. Jedes Objekt stellt bereit:

• Image – die Bilddaten selbst (verwendet beim Ersetzen oder beim Extrahieren von Bildern aus dem PDF)
• Bounds – ein RectangleF, das die Position und Größe des Bildes auf der Seite beschreibt

// Create a PdfImageHelper and inspect the first page
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

console.log(`Found ${images.length} image(s) on this page`);
for (let i = 0; i < images.length; i++) {
  console.log(`Image ${i}: position=(${images[i].Bounds.X}, ${images[i].Bounds.Y}), size=${images[i].Bounds.Width}x${images[i].Bounds.Height}`);
}

Der Array-Index folgt der Reihenfolge, in der die Bilder auf der Seite erscheinen, sodass images[0] das erste ist, images[1] das zweite und so weiter. Sobald Sie dieses Array haben, ist das Ersetzen oder Löschen ein einzelner Methodenaufruf – behandelt in den nächsten beiden Abschnitten.

---

Ein Bild ersetzen

Beim Ersetzen bleibt das Dokumentlayout intakt: Das neue Bild übernimmt die Position und die Platzhaltergröße des Originals, sodass sich nichts um es herum verschiebt. Die Schritte sind: das PDF und das Ersatzbild in das VFS laden, das PDF öffnen, GetImagesInfo aufrufen und dann ReplaceImage mit dem Zielinformationsobjekt und dem neuen Bild aufrufen.

function App() {
  const replaceImageInPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Load the new image used for replacement into VFS
    const newImageName = 'ChartImage.png';
    await window.spire.FetchFileToVFS(newImageName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Load the new image and replace the first image on the page
    let newImage = pdfModule.PdfImage.FromFile(newImageName);
    helper.ReplaceImage(images[0], newImage);

    // Define the output file name in PDF format
    const outputFileName = 'ReplaceImage.pdf';

    // Save as PDF format
    doc.SaveToFile({ fileName: outputFileName });
    doc.Close();

    // Read the generated PDF file from VFS and trigger download
    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;

Nach dem Ersetzen eines Bildes generiertes PDF-Dokument

helper.ReplaceImage(images[0], newImage) tauscht den Inhalt des Bildes bei Index 0 gegen newImage aus. Der Austausch erfolgt an derselben Position und mit denselben Abmessungen wie beim Original. Wenn das Ersatzbild ein anderes Seitenverhältnis hat, wird es gestreckt, um in den ursprünglichen Platzhalter zu passen.

---

Ein Bild löschen

Beim Löschen ist das Setup genau dasselbe wie beim Ersetzen – das PDF laden, die Seite abrufen, GetImagesInfo aufrufen. Der einzige Unterschied ist der abschließende Aufruf: Statt ReplaceImage rufen Sie DeleteImage mit dem Zielinformationsobjekt auf, und das Bild wird vollständig entfernt, sodass sein Bereich leer bleibt.

// Everything above is identical to the replace example:
// load the PDF, get page 0, create the helper, call GetImagesInfo(page)

// Delete the first image on the page
helper.DeleteImage({ imageInfo: images[0] });

Nach dem Löschen eines Bildes generiertes PDF-Dokument

helper.DeleteImage({ imageInfo: images[0] }) entfernt das Bild bei Index 0. Der umgebende Text, die Grafiken und das Layout bleiben unverändert – der von ihm eingenommene Bereich bleibt einfach leer, ohne Neufluss.

---

Bilder anhand der Position ansprechen

Wenn eine Seite mehrere Bilder enthält, wissen Sie möglicherweise nicht, welcher Array-Index der gewünschte ist. Die Bounds-Eigenschaft sagt Ihnen, wo jedes Bild liegt, und mit IntersectsWith können Sie auf Bilder innerhalb eines bestimmten Bereichs einwirken – praktisch, um einen Kopfzeilenstempel zu entfernen oder ein Diagramm auszutauschen, das immer an derselben Stelle landet.

// Get the image information on the page
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

// Define the target region (e.g., a stamp area in the bottom-right)
let targetRect = new pdfModule.RectangleF({ x: 400, y: 700, width: 100, height: 80 });

// Iterate through the images and delete those within the target region
for (let i = 0; i < images.length; i++) {
  if (images[i].Bounds.IntersectsWith({ rect: targetRect })) {
    helper.DeleteImage({ imageInfo: images[i] });
    console.log(`Deleted image at position (${images[i].Bounds.X}, ${images[i].Bounds.Y})`);
  }
}

Bounds ist ein RectangleF mit X, Y, Width und Height, alle in Punkten (1 Punkt = 1/72 Zoll). Der Ursprung (0, 0) ist die obere linke Ecke der Seite.

---

Stapelverarbeitung über alle Seiten

Um auf Bilder in einem mehrseitigen Dokument einzuwirken, durchlaufen Sie die Pages-Auflistung und führen dieselbe Logik pro Seite aus. Das folgende Beispiel löscht jedes Bild; tauschen Sie DeleteImage gegen ReplaceImage aus, um stattdessen stapelweise zu ersetzen (laden Sie das neue Bild einmal vor der Schleife).

const batchDeleteAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();

  // Loop through all pages
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Delete all images on this page
    for (let i = 0; i < images.length; i++) {
      helper.DeleteImage({ imageInfo: images[i] });
    }
    console.log(`Page ${pageIndex + 1}: deleted ${images.length} image(s)`);
  }

  const outputFileName = 'AllImagesDeleted.pdf';
  doc.SaveToFile({ fileName: outputFileName });
  doc.Close();

  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);
};

---

Häufig gestellte Fragen

Wie finde ich das spezifische Bild, das ich ändern möchte?

GetImagesInfo gibt die Bilder in Seitenreihenfolge zurück, sodass images[0], images[1], … Ihnen das erste, zweite usw. liefern. Wenn die Reihenfolge nicht offensichtlich ist, lesen Sie die Bounds-Eigenschaft jedes Objekts, um zu sehen, wo es liegt, und verwenden Sie Bounds.IntersectsWith, um Bilder innerhalb eines bekannten Bereichs abzugleichen. Siehe oben unter Bilder anhand der Position ansprechen.

Beeinträchtigt das Ersetzen oder Löschen den Rest der Seite?

Nein. Beide Vorgänge berühren nur das Bildobjekt selbst. Ein Ersetzen behält die ursprüngliche Position und Platzhaltergröße bei; ein Löschen hinterlässt eine leere Lücke. Text, Grafiken und Layout bleiben unverändert, und das Dokument wird nie neu umgebrochen.

Kann ich ein Bild durch eines mit einem anderen Seitenverhältnis ersetzen?

Ja – ReplaceImage streckt das neue Bild, um den ursprünglichen Platzhalter auszufüllen. Wenn Sie die Proportionen des neuen Bildes beibehalten müssen, löschen Sie das alte und fügen Sie den Ersatz mit DrawImage in der gewünschten exakten Größe hinzu. Siehe Wie man Bilder zu einem PDF in JavaScript (React) hinzufügt.

Wie entferne ich jedes Bild aus einem Dokument?

Durchlaufen Sie doc.Pages.Count, rufen Sie GetImagesInfo pro Seite auf und DeleteImage für jeden Eintrag – das Beispiel unter Stapelverarbeitung über alle Seiten zeigt den vollständigen Code.

---

Siehe auch

• Wie man Bilder zu einem PDF in JavaScript (React) hinzufügt
• Bilder aus einem PDF in JavaScript (React) extrahieren
• Spire.PDF for JavaScript in ein React-Projekt integrieren
• Produktseite von Spire.PDF for JavaScript

PDF-документ, созданный вами в прошлом квартале, всё ещё распространяется внутри компании, но его логотип был изменён в прошлом месяце, а на одной диаграмме указаны числа, которые уже не соответствуют действительности. Вы не хотите пересоздавать документ с нуля — вам просто нужно заменить устаревшее изображение на новое или полностью удалить устаревший штамп или водяной знак.

Spire.PDF для JavaScript выполняет обе задачи прямо в браузере с помощью своего класса PdfImageHelper. Основная идея одинакова для обеих операций: сначала найти изображение на странице, затем выполнить действие над ним. GetImagesInfo считывает метаданные изображения, ReplaceImage подставляет новое содержимое, сохраняя исходное место, а DeleteImage удаляет объект и оставляет пространство пустым. Никакого сервера, никакой загрузки, никакого Adobe Acrobat.

В этой статье вы узнаете, как:

• Найти все изображения на странице с помощью GetImagesInfo
• Заменить изображение, сохранив его исходное положение и размер
• Удалить изображение и оставить чистое пустое место
• Выбрать нужное изображение по его положению, когда вы не знаете его индекс
• Очистить изображения на всех страницах документа

---

Предварительные требования

Это руководство предполагает, что у вас есть проект React с установленным Spire.PDF для JavaScript и инициализированным модулем WASM. Если вы ещё не настроили это, следуйте инструкции Интеграция Spire.PDF для JavaScript в проект React.

Вам понадобится:

• PDF-файл, который уже содержит хотя бы одно изображение, загруженный в VFS
• (Для замены) новый файл изображения для подстановки
• Модуль WASM, доступный через window.wasmModule.spirepdf

---

Как Spire.PDF находит изображения

И замена, и удаление начинаются с одного и того же шага: определения того, какие изображения есть на странице и где они расположены. Метод PdfImageHelper.GetImagesInfo(page) возвращает массив объектов с информацией об изображениях. Каждый объект предоставляет:

• Image — сами данные изображения (используется при замене или при извлечении изображений из PDF)
• Bounds — объект RectangleF, описывающий положение и размер изображения на странице

// Create a PdfImageHelper and inspect the first page
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

console.log(`Found ${images.length} image(s) on this page`);
for (let i = 0; i < images.length; i++) {
  console.log(`Image ${i}: position=(${images[i].Bounds.X}, ${images[i].Bounds.Y}), size=${images[i].Bounds.Width}x${images[i].Bounds.Height}`);
}

Индекс массива соответствует порядку появления изображений на странице, поэтому images[0] — это первое изображение, images[1] — второе и так далее. Получив этот массив, замена или удаление выполняется одним вызовом метода — об этом рассказывается в следующих двух разделах.

---

Замена изображения

Замена сохраняет макет документа неизменным: новое изображение наследует положение и размер заполнителя оригинала, поэтому ничего вокруг не сдвигается. Шаги таковы: загрузить PDF и изображение для замены в VFS, открыть PDF, вызвать GetImagesInfo, затем вызвать ReplaceImage с целевым объектом информации и новым изображением.

function App() {
  const replaceImageInPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Load the new image used for replacement into VFS
    const newImageName = 'ChartImage.png';
    await window.spire.FetchFileToVFS(newImageName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Load the new image and replace the first image on the page
    let newImage = pdfModule.PdfImage.FromFile(newImageName);
    helper.ReplaceImage(images[0], newImage);

    // Define the output file name in PDF format
    const outputFileName = 'ReplaceImage.pdf';

    // Save as PDF format
    doc.SaveToFile({ fileName: outputFileName });
    doc.Close();

    // Read the generated PDF file from VFS and trigger download
    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-документ, созданный после замены изображения

helper.ReplaceImage(images[0], newImage) заменяет содержимое изображения с индексом 0 на newImage. Замена происходит в той же позиции и с теми же размерами, что и оригинал. Если у заменяющего изображения другое соотношение сторон, оно растягивается, чтобы заполнить исходный заполнитель.

---

Удаление изображения

Удаление использует точно такую же подготовку, как и замена — загрузите PDF, получите страницу, вызовите GetImagesInfo. Единственное отличие — в финальном вызове: вместо ReplaceImage вы вызываете DeleteImage с целевым объектом информации, и изображение полностью удаляется, оставляя своё место пустым.

// Everything above is identical to the replace example:
// load the PDF, get page 0, create the helper, call GetImagesInfo(page)

// Delete the first image on the page
helper.DeleteImage({ imageInfo: images[0] });

PDF-документ, созданный после удаления изображения

helper.DeleteImage({ imageInfo: images[0] }) удаляет изображение с индексом 0. Окружающий текст, графика и макет остаются нетронутыми — занимаемое им пространство просто остаётся пустым, без перекомпоновки.

---

Выбор изображений по положению

Когда на странице несколько изображений, вы можете не знать, какой индекс массива соответствует нужному. Свойство Bounds подсказывает, где находится каждое изображение, а IntersectsWith позволяет воздействовать на изображения внутри определённой области — удобно для удаления штампа в колонтитуле или замены диаграммы, которая всегда находится в одном и том же месте.

// Get the image information on the page
let helper = new pdfModule.PdfImageHelper();
let images = helper.GetImagesInfo(page);

// Define the target region (e.g., a stamp area in the bottom-right)
let targetRect = new pdfModule.RectangleF({ x: 400, y: 700, width: 100, height: 80 });

// Iterate through the images and delete those within the target region
for (let i = 0; i < images.length; i++) {
  if (images[i].Bounds.IntersectsWith({ rect: targetRect })) {
    helper.DeleteImage({ imageInfo: images[i] });
    console.log(`Deleted image at position (${images[i].Bounds.X}, ${images[i].Bounds.Y})`);
  }
}

Bounds — это RectangleF с X, Y, Width и Height, все значения в пунктах (1 пункт = 1/72 дюйма). Начало координат (0, 0) — это верхний левый угол страницы.

---

Пакетная обработка на всех страницах

Чтобы выполнить действия с изображениями во всём многостраничном документе, пройдите циклом по коллекции Pages и выполните ту же логику для каждой страницы. Пример ниже удаляет все изображения; замените DeleteImage на ReplaceImage, чтобы вместо этого выполнить пакетную замену (загрузите новое изображение один раз перед циклом).

const batchDeleteAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();

  // Loop through all pages
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Delete all images on this page
    for (let i = 0; i < images.length; i++) {
      helper.DeleteImage({ imageInfo: images[i] });
    }
    console.log(`Page ${pageIndex + 1}: deleted ${images.length} image(s)`);
  }

  const outputFileName = 'AllImagesDeleted.pdf';
  doc.SaveToFile({ fileName: outputFileName });
  doc.Close();

  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);
};

---

Часто задаваемые вопросы

Как найти конкретное изображение, которое я хочу изменить?

GetImagesInfo возвращает изображения в порядке их следования на странице, поэтому images[0], images[1], … дают вам первое, второе и т. д. Когда порядок неочевиден, прочитайте свойство Bounds каждого объекта, чтобы увидеть, где оно расположено, и используйте Bounds.IntersectsWith для сопоставления изображений внутри известной области. См. раздел Выбор изображений по положению выше.

Нарушают ли замена или удаление остальную часть страницы?

Нет. Обе операции затрагивают только сам объект изображения. Замена сохраняет исходное положение и размер заполнителя; удаление оставляет пустой промежуток. Текст, графика и макет не затрагиваются, и документ никогда не перекомпоновывается.

Могу ли я заменить изображение на такое, у которого другое соотношение сторон?

Да — ReplaceImage растягивает новое изображение, чтобы заполнить исходный заполнитель. Если вам нужно сохранить пропорции нового изображения, удалите старое и добавьте замену с помощью DrawImage точно нужного вам размера. См. Как добавить изображения в PDF на JavaScript (React).

Как удалить все изображения из документа?

Пройдите циклом по doc.Pages.Count, вызовите GetImagesInfo для каждой страницы и DeleteImage для каждой записи — пример Пакетная обработка на всех страницах показывает полный код.

---

См. также

• Как добавить изображения в PDF на JavaScript (React)
• Извлечение изображений из PDF на JavaScript (React)
• Интеграция Spire.PDF для JavaScript в проект React
• Страница продукта Spire.PDF для JavaScript

You build a document list for a client, and the client asks: "can I see the pages before downloading?" Just like that, you own a rendering feature you did not plan for. The same request shows up everywhere — a thumbnail strip under an inbox, a preview card pasted into a chat, a slide pulled from a deck and posted to social. In every case a PDF cannot be shown inline, but a picture of its pages can.

Once that switch is made, four decisions decide whether the work is usable: which pages, which format, how sharp, and how the files reach the user. Most PDF-to-image samples answer only the first one and leave you to discover the rest in production.

Spire.PDF for JavaScript renders pages in the browser through WebAssembly and hands you each page as an image stream. All four of those decisions are yours to make, and each one is a single argument or a changed file extension. Files move in and out through a virtual file system (VFS), so nothing is uploaded anywhere.

In this article you will learn how to:

• Render every page of a PDF to PNG and download the set as a ZIP
• Limit conversion to a single page or a range of pages
• Switch between PNG, JPEG, and BMP depending on what the image is for
• Trade sharpness against file size using DPI
• Deliver the result as a download, as individual files, or straight into your React UI
• Fix garbled or blank text caused by missing fonts

---

Prerequisites

This walkthrough assumes a React project with Spire.PDF for JavaScript installed and the WASM module initialized. For setup, see Integrating Spire.PDF for JavaScript in a React Project.

You will need:

• A PDF loaded into the VFS
• The WASM module reachable at window.wasmModule.spirepdf
• The jszip package, if you want to bundle multiple pages into one download (npm install jszip)

---

Convert every page to PNG

The full-document case is the one you will reach for most often: open the PDF, walk every page, render each to a stream, write each stream to a folder in the VFS, then zip that folder and hand it to the browser as a download.

import JSZip from "jszip";

function App() {
  const convertToImage = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file and fonts into VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'Flowers.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Create an output directory to hold the converted images
    let outputDirectoryName = "ImagesFolders/";
    window.dotnetRuntime.Module.FS.mkdirTree(outputDirectoryName);

    // Loop through each page and save it as an image
    for (let i = 0; i < doc.Pages.Count; i++) {
      const outputFileName = outputDirectoryName + "ConvertedImages_" + i + ".png";
      let stream = doc.SaveAsImage({ pageIndex: i });
      stream.Save(outputFileName);
      stream.Dispose();
    }

    doc.Dispose();

    // Read the converted files from VFS and trigger download
    const zip = new JSZip();
    let items = await window.dotnetRuntime.Module.FS.readdir(outputDirectoryName);
    items = items.filter((item) => item !== "." && item !== "..");
    for (const item of items) {
      const itemPath = `${outputDirectoryName}/${item}`;
      const fileData = await window.dotnetRuntime.Module.FS.readFile(itemPath);
      zip.file(item, fileData);
    }

    // Convert the ZIP to a Blob and trigger the browser download
    const zipBlob = await zip.generateAsync({ type: "blob" });
    const url = URL.createObjectURL(zipBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'ImagesFolders';
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF To Image</h1>
      <button onClick={convertToImage}>
        Generate
      </button>
    </div>
  );
}

export default App;

Each page of the PDF exported as a PNG image via SaveAsImage and bundled into a ZIP file for download

What the code does:

• doc.SaveAsImage({ pageIndex: i }) renders one page and returns an image stream. Page indexes are zero-based, so pageIndex: 0 is the first page.
• stream.Save(outputFileName) writes that stream into the VFS. The extension you pass here sets the format — more on that below.
• stream.Dispose() releases the stream before the next page is rendered. Skipping it on a long document wastes memory for no benefit.
• The FS.mkdirTree → FS.readdir → FS.readFile sequence exists because the WASM module writes to its own file system, not to the browser's download folder. JSZip is what turns that folder into something the user can save.
• Rendering is read-only. The source PDF is opened, read, and disposed; it is never modified.

Note: This produces a picture of each page, which is what you want for previews, thumbnails, and sharing. If you instead want the original image files embedded inside the PDF — the actual chart or photo at its native resolution, not a screenshot of the page it sits on — that is a different operation: see Extract Images from a PDF in JavaScript (React).

---

Convert specific pages only

Rendering a 200-page document to produce three thumbnails is wasted work. Since the page walk is just a for loop over doc.Pages.Count, narrowing it is a matter of changing the bounds.

A single page — the cover or a specific exhibit:

// Render only the first page
const outputFileName = outputDirectoryName + "cover.png";
let stream = doc.SaveAsImage({ pageIndex: 0 });
stream.Save(outputFileName);
stream.Dispose();

A contiguous range — pages 3 through 5, using zero-based indexes 2 through 4:

const startPage = 2;
const endPage = 4;

for (let i = startPage; i <= endPage && i < doc.Pages.Count; i++) {
  let stream = doc.SaveAsImage({ pageIndex: i });
  stream.Save(outputDirectoryName + "page_" + (i + 1) + ".png");
  stream.Dispose();
}

A hand-picked set — pages that are not next to each other:

const pagesToRender = [0, 7, 12];

for (const pageIndex of pagesToRender) {
  if (pageIndex >= doc.Pages.Count) continue;
  let stream = doc.SaveAsImage({ pageIndex });
  stream.Save(outputDirectoryName + "page_" + (pageIndex + 1) + ".png");
  stream.Dispose();
}

The i < doc.Pages.Count guard matters when the page list comes from user input rather than a hardcoded constant — an out-of-range index is a runtime error you would rather not ship.

Note the (i + 1) in the filenames. Zero-based indexes are right for the API and wrong for humans; naming files after the page number the user sees avoids a class of support tickets later.

Recommended article: When you need the original image objects out of the PDF rather than a rendered page — the embedded chart or photo at its native resolution — see Extract Images from a PDF in JavaScript (React).

---

Choose an output format

The format is decided entirely by the extension you pass to stream.Save. Nothing else in the pipeline changes.

stream.Save(outputDirectoryName + "page_1.png");  // PNG
stream.Save(outputDirectoryName + "page_1.jpg");  // JPEG
stream.Save(outputDirectoryName + "page_1.bmp");  // BMP

Format	Extension	What you get	Reach for it when
PNG	.png	Lossless. Text edges and thin lines stay crisp. Larger files.	Document pages, UI previews, anything with text or diagrams
JPEG	.jpg	Lossy. Much smaller. No transparency, and compression artifacts show around small text.	Photographic or scanned pages, email attachments, size-constrained delivery
BMP	.bmp	Uncompressed. Very large.	Legacy pipelines that specifically require uncompressed bitmaps

The practical rule: if the page is mostly text, use PNG. JPEG's compression is tuned for photographic content, and on a text-heavy page it produces visible smudging around glyph edges that no amount of quality setting fully removes. If the page is a scanned photo, JPEG will cut the file size dramatically with little visible cost.

---

Set the resolution (DPI)

SaveAsImage renders at 96 DPI by default, which matches a typical screen. That is the right setting for thumbnails and on-screen previews. It is not enough when someone zooms in, prints the page, or feeds the image into OCR.

Pass dpiX and dpiY to change it:

// Export each page as an image at 150 DPI
for (let i = 0; i < doc.Pages.Count; i++) {
  let stream = doc.SaveAsImage({ pageIndex: i, dpiX: 150, dpiY: 150 });
  stream.Save(outputDirectoryName + "highres_" + i + ".png");
  stream.Dispose();
}

Resolution is not a free upgrade — pixel count scales with the square of the DPI, so the cost climbs quickly:

DPI	Relative pixel count vs. 96 DPI	Comparable to	Reasonable for
96 (default)	1×	Standard screen	Thumbnails, inline previews, gallery strips
150	~2.4×	Retina display, light zoom	Email attachments, previews users may zoom, draft printing
300	~9.8×	Print quality	Print output, OCR input, archival masters

Two things follow from that table. First, going from 96 to 300 multiplies the work and the storage by roughly ten, so don't reach for 300 on a 200-page document unless someone is actually going to print it. Second, dpiX and dpiY are separate arguments for a reason — they are normally set to the same value, and setting them differently will stretch the page.

---

Package or preview the images

Rendering the pages is half the job; the other half is getting them to the user. Three patterns cover nearly everything.

Bundle everything into one ZIP — the approach in the first example. Best when the user wants a folder of files, and the only option that scales to dozens of pages without hammering the browser with download prompts.

Download a single image directly — no JSZip needed when there is only one file:

const outputFileName = 'cover.png';
let stream = doc.SaveAsImage({ pageIndex: 0 });
stream.Save(outputFileName);
stream.Dispose();

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);

Keep the images inside your React UI — no download at all. This is the right choice for preview panes and thumbnail strips, where the images are temporary and a download folder full of page_1.png files would just be clutter:

const renderPreviewStrip = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Flowers.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Flowers.pdf');

  const previewUrls = [];

  for (let i = 0; i < doc.Pages.Count; i++) {
    const tempName = `preview_${i}.png`;
    let stream = doc.SaveAsImage({ pageIndex: i, dpiX: 72, dpiY: 72 });
    stream.Save(tempName);
    stream.Dispose();

    const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
    const blob = new Blob([fileArray], { type: 'image/png' });
    previewUrls.push(URL.createObjectURL(blob));
  }

  doc.Dispose();

  // previewUrls can now be rendered as <img src={url} /> in a thumbnail strip
  return previewUrls;
};

Note the dpiX: 72 in the preview case: thumbnails don't need full resolution, and rendering them smaller keeps the strip responsive. Remember to call URL.revokeObjectURL(url) for each URL when the component unmounts, or you will leak memory on every re-render.

You may also like: Working from a set of images rather than a PDF — assembling scans or photos into a single document? That is Converting Images to PDF in JavaScript (React).

---

Fix garbled text: load fonts

A PDF usually embeds the fonts it uses, but not always — and when it doesn't, the renderer has to substitute something. In the browser there is no operating system font library to fall back on, so a missing font turns into blank space or boxes.

The fix is to put the font file where the WASM runtime expects to find it before you render:

// Load a TrueType font into the VFS font directory before converting
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

ARIALUNI.TTF is worth knowing about: it covers common CJK characters as well as Latin, which makes it the safer default when your users upload documents in languages you haven't enumerated. If you only ever handle English documents, a smaller font keeps the download lighter.

Because this runs before any page is rendered, one missing-font check at the start of your conversion function is enough — you don't need to reload fonts per page.

---

FAQ

Does converting a PDF to images change the original PDF?

No. SaveAsImage renders pages and returns new image data; the source document is opened read-only and disposed afterward. Your original PDF is untouched.

How do I convert just the first page?

Call SaveAsImage once with pageIndex: 0 instead of looping. See Convert specific pages only.

Why is my output bigger than the original PDF?

Because a rendered page stores pixels, while a PDF stores drawing instructions. A text-heavy PDF page is often a few kilobytes; a 300 DPI PNG of that same page can be megabytes. Drop to 96–150 DPI or switch to JPEG if size matters more than fidelity.

Can I show the images in my app instead of downloading them?

Yes — build object URLs from the image data and use them as <img> sources. See Package or preview the images. Just remember to revoke the URLs when you're done.

Will a very long document cause problems?

Pages are rendered one at a time inside the loop, so the WASM module holds roughly one page image at a time rather than the whole document. For extremely long files, convert in chunks and append to the archive as you go rather than holding every image in an array.

What's the difference between converting a page to an image and extracting images from a PDF?

Converting renders the whole page — text, layout, images, backgrounds — as one flat picture. Extracting pulls out the original image objects embedded in the document at their native resolution. Use conversion for previews and sharing; use extraction when you need the source artwork itself.

Where do the converted files actually go?

Into the WASM virtual file system, not your server and not the user's disk. Nothing leaves the browser — the only way files reach the user is the download or object-URL step you write yourself.

---

See Also

Looking for the reverse direction — turning images back into a PDF? That is Converting Images to PDF in JavaScript (React). The rest of the PDF page pipeline in React:

• Extract Images from a PDF in JavaScript (React)
• How to Add Images to a PDF in JavaScript (React)
• Integrating Spire.PDF for JavaScript in a React Project
• Spire.PDF for JavaScript Product Page

Recebeu um relatório de 40 páginas e precisa dos oito gráficos que contém para uma apresentação, ou quer extrair fotografias de produtos do catálogo de um fornecedor. O problema: um PDF armazena imagens num formato de fluxo interno que as APIs nativas do navegador não conseguem ler, por isso não existe um caminho de "clique com o botão direito, guardar imagem".

Spire.PDF for JavaScript lê esses fluxos por si através da sua classe PdfImageHelper. GetImagesInfo recupera todos os objetos de imagem de uma página, e o método Image.Save de cada um escreve-os como um ficheiro autónomo. Tudo é executado no navegador através de WebAssembly — o PDF nunca sai do dispositivo e não há qualquer servidor ou ferramenta externa envolvida.

Neste artigo vai aprender a:

• Recuperar objetos de imagem de uma página PDF com GetImagesInfo
• Guardar cada um no VFS e acionar uma transferência
• Percorrer todas as páginas de um documento com várias páginas
• Aplicar um esquema de nomenclatura consistente aos ficheiros extraídos
• Utilizar as imagens extraídas diretamente na sua interface React

---

Pré-requisitos

Este guia pressupõe que tem um projeto React com o Spire.PDF for JavaScript instalado e o módulo WASM inicializado. Para instruções de configuração, consulte Integrar o Spire.PDF for JavaScript num projeto React.

Vai precisar de:

• Um PDF que contenha imagens, carregado no VFS
• O módulo WASM acessível através de window.wasmModule.spirepdf

---

Extrair imagens de uma única página

O fluxo de trabalho básico de extração recupera todas as imagens de uma página, guarda cada uma no VFS e aciona uma transferência:

1. Carregue o PDF no VFS e abra-o com PdfDocument
2. Obtenha a página de destino a partir do documento
3. Chame GetImagesInfo para recuperar um array de objetos de informação de imagem
4. Percorra o array, chamando images[i].Image.Save() para escrever cada imagem no VFS
5. Leia do VFS e acione uma transferência do navegador para cada imagem extraída

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      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;

Ficheiros de imagem extraídos do PDF

O que o código faz:

• helper.GetImagesInfo(page) devolve um array de objetos de informação de imagem para a página especificada. Cada objeto tem uma propriedade Image que dá acesso aos dados da imagem.
• images[i].Image.Save({ fileName: outputFileName }) escreve a imagem no VFS como um ficheiro PNG.
• O padrão de leitura do VFS + Blob + transferência é o mesmo utilizado para a saída de PDF, mas com type: 'image/png' em vez de type: 'application/pdf'.
• A extração é uma operação apenas de leitura — o documento PDF original não é modificado. Se quiser alterar ou remover uma imagem no local em vez de apenas a extrair, consulte Substituir e remover imagens de PDFs em JavaScript (React).

---

Extrair imagens de todas as páginas

O exemplo acima extrai apenas da primeira página. Para um documento com várias páginas, como um catálogo de produtos ou um relatório anual, normalmente quer todas as imagens de todas as páginas. Basta adicionar um ciclo externo pelas páginas do documento:

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      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);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

Principal diferença em relação ao exemplo de página única: o ciclo for externo itera através de doc.Pages.Count, e o nome do ficheiro inclui tanto o número da página como o índice da imagem (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, etc.) para manter os ficheiros extraídos organizados.

---

Nomear os ficheiros extraídos

Uma estratégia de nomenclatura consistente ajuda-o a acompanhar qual imagem veio de que página e posição. Aqui estão padrões comuns:

Numeração sequencial — a mais simples, adequada para extração de uma única página:

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

Página e índice — a melhor para extração de várias páginas, preserva a localização de origem:

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

Com marca temporal — útil ao extrair de vários documentos numa sessão:

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

Baseado no nome do documento de origem — ajuda a acompanhar a origem:

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

Trabalhar com as imagens extraídas

Em vez de (ou além de) acionar transferências, pode utilizar os dados das imagens extraídas diretamente na sua aplicação React. Por exemplo, apresente as imagens extraídas numa galeria:

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

Esta abordagem dá-lhe URLs de objetos que podem ser utilizados diretamente em elementos <img src={url} />, facilitando a criação de uma galeria de pré-visualização, permitindo que os utilizadores selecionem imagens específicas ou passando as imagens para outras partes da sua aplicação. Assim que tiver os dados da imagem, a lógica de desenho para adicioná-la a um PDF é o próximo passo natural.

Nota: Lembre-se de chamar URL.revokeObjectURL(url) para cada URL de objeto quando já não precisar dele, para libertar memória. Se estiver a apresentar imagens numa galeria, revoguw os URLs quando o componente da galeria for desmontado.

---

Perguntas frequentes

A extração de imagens irá modificar o PDF original?

Não. A extração de imagens é uma operação apenas de leitura. GetImagesInfo lê os dados da imagem do PDF sem modificar o documento, e Image.Save escreve uma cópia no VFS. O PDF original permanece inalterado.

Em que formato são guardadas as imagens extraídas?

Os exemplos neste artigo guardam as imagens extraídas como ficheiros PNG (.png). A extensão de ficheiro que passa para Image.Save determina o formato de saída, por isso pode escolher um diferente se o seu caso de uso assim o exigir.

Como posso extrair imagens de um intervalo específico de páginas?

Em vez de percorrer todas as páginas com doc.Pages.Count, percorra o intervalo pretendido. Por exemplo, para extrair das páginas 3 a 5 (indexado a partir de 0: 2 a 4):

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

Posso extrair imagens e apresentá-las na minha aplicação React sem as transferir?

Sim. Em vez de criar uma ligação de transferência, crie um URL de objeto com URL.createObjectURL(blob) e utilize-o como src de um elemento <img>. Consulte a secção Trabalhar com as imagens extraídas acima para ver um exemplo de código.

E se uma página não tiver imagens?

GetImagesInfo devolve um array vazio para páginas sem imagens. O ciclo for simplesmente não é executado, por isso não são gerados ficheiros nem lançados erros. É seguro executá-lo em qualquer página.

---

Ver também

• Como adicionar imagens a um PDF em JavaScript (React)
• Substituir e remover imagens de PDFs em JavaScript (React)
• Integrar o Spire.PDF for JavaScript num projeto React
• Página do produto Spire.PDF for JavaScript

40페이지 분량의 보고서를 받았고 슬라이드 덱에 넣을 8개의 차트가 필요하거나, 공급업체 카탈로그에서 제품 사진을 추출하고 싶을 수 있습니다. 문제는 PDF가 브라우저의 기본 제공 API로는 읽을 수 없는 내부 스트림 형식으로 이미지를 저장한다는 점입니다. 따라서 "마우스 오른쪽 버튼 클릭 후 이미지 저장" 경로가 없습니다.

Spire.PDF for JavaScript는 PdfImageHelper 클래스를 통해 이러한 스트림을 읽어줍니다. GetImagesInfo는 페이지의 모든 이미지 객체를 검색하고, 각 객체의 Image.Save 메서드는 이를 독립 실행형 파일로 기록합니다. 모든 것이 WebAssembly를 통해 브라우저에서 실행되므로 PDF가 기기를 떠나지 않으며 서버나 외부 도구가 필요하지 않습니다.

이 문서에서는 다음 방법을 알아봅니다:

• GetImagesInfo로 PDF 페이지에서 이미지 객체 검색
• 각 이미지를 VFS에 저장하고 다운로드 트리거
• 여러 페이지 문서의 모든 페이지 순회
• 추출된 파일에 일관된 이름 지정 체계 적용
• 추출된 이미지를 React UI 내에서 직접 사용

---

사전 요구 사항

이 연습에서는 Spire.PDF for JavaScript가 설치되고 WASM 모듈이 초기화된 React 프로젝트가 있다고 가정합니다. 설정 지침은 React 프로젝트에서 Spire.PDF for JavaScript 통합을 참조하세요.

다음이 필요합니다:

• 이미지가 포함되어 있고 VFS에 로드된 PDF
• window.wasmModule.spirepdf를 통해 접근할 수 있는 WASM 모듈

---

단일 페이지에서 이미지 추출

기본 추출 워크플로는 한 페이지에서 모든 이미지를 검색하고, 각 이미지를 VFS에 저장한 다음 다운로드를 트리거합니다:

1. PDF를 VFS에 로드하고 PdfDocument로 엽니다
2. 문서에서 대상 페이지를 가져옵니다
3. GetImagesInfo를 호출하여 이미지 정보 객체 배열을 검색합니다
4. 배열을 반복하면서 images[i].Image.Save()를 호출하여 각 이미지를 VFS에 기록합니다
5. VFS에서 읽고 추출된 각 이미지에 대해 브라우저 다운로드를 트리거합니다

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      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에서 추출된 이미지 파일

코드가 하는 일:

• helper.GetImagesInfo(page)는 지정된 페이지에 대한 이미지 정보 객체 배열을 반환합니다. 각 객체에는 이미지 데이터에 접근할 수 있는 Image 속성이 있습니다.
• images[i].Image.Save({ fileName: outputFileName })는 이미지를 PNG 파일로 VFS에 기록합니다.
• VFS 읽기 + Blob + 다운로드 패턴은 PDF 출력에 사용되는 것과 동일하지만 type: 'application/pdf' 대신 type: 'image/png'를 사용합니다.
• 추출은 읽기 전용 작업입니다 — 원본 PDF 문서는 수정되지 않습니다. 이미지를 단순히 읽어오는 대신 그 자리에서 변경하거나 제거하려면 JavaScript(React)에서 PDF의 이미지 교체 및 제거를 참조하세요.

---

모든 페이지에서 이미지 추출

위 예제는 첫 번째 페이지에서만 추출합니다. 제품 카탈로그나 연간 보고서와 같은 여러 페이지 문서의 경우 일반적으로 모든 페이지의 모든 이미지를 원합니다. 문서의 페이지를 순회하는 외부 루프를 추가하기만 하면 됩니다:

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      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);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

단일 페이지 예제와의 주요 차이점: 외부 for 루프가 doc.Pages.Count를 반복하며, 파일 이름에 페이지 번호와 이미지 인덱스가 모두 포함됩니다(Page1_Image1.png, Page1_Image2.png, Page2_Image1.png 등). 이렇게 하면 추출된 파일을 체계적으로 관리할 수 있습니다.

---

추출된 파일 이름 지정

일관된 이름 지정 전략은 어떤 이미지가 어느 페이지와 위치에서 왔는지 추적하는 데 도움이 됩니다. 일반적인 패턴은 다음과 같습니다:

순차 번호 매기기 — 가장 간단하며 단일 페이지 추출에 적합합니다:

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

페이지 및 인덱스 — 다중 페이지 추출에 가장 적합하며 원본 위치를 유지합니다:

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

타임스탬프 — 한 세션에서 여러 문서를 추출할 때 유용합니다:

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

원본 문서 이름 기반 — 출처 추적에 도움이 됩니다:

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

추출된 이미지 작업

다운로드를 트리거하는 대신(또는 추가로) 추출된 이미지 데이터를 React 애플리케이션에서 직접 사용할 수 있습니다. 예를 들어 추출된 이미지를 갤러리에 표시할 수 있습니다:

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

이 접근 방식을 사용하면 <img src={url} /> 요소에 직접 사용할 수 있는 객체 URL을 얻을 수 있으므로 미리보기 갤러리를 만들거나, 사용자가 특정 이미지를 선택하게 하거나, 이미지를 애플리케이션의 다른 부분에 전달하기 쉽습니다. 이미지 데이터를 확보한 후에는 PDF에 이미지를 추가하는 그리기 로직이 자연스러운 다음 단계입니다.

참고: 사용을 마친 각 객체 URL에 대해 URL.revokeObjectURL(url)를 호출하여 메모리를 해제해야 합니다. 갤러리에서 이미지를 표시하는 경우 갤러리 컴포넌트가 언마운트될 때 URL을 해제하세요.

---

FAQ

이미지를 추출하면 원본 PDF가 수정되나요?

아니요. 이미지 추출은 읽기 전용 작업입니다. GetImagesInfo는 문서를 수정하지 않고 PDF에서 이미지 데이터를 읽으며, Image.Save는 VFS에 복사본을 기록합니다. 원본 PDF는 변경되지 않습니다.

추출된 이미지는 어떤 형식으로 저장되나요?

이 문서의 예제는 추출된 이미지를 PNG 파일(.png)로 저장합니다. Image.Save에 전달하는 파일 확장자가 출력 형식을 결정하므로 사용 사례에 따라 다른 형식을 선택할 수 있습니다.

특정 페이지 범위에서 이미지를 추출하려면 어떻게 하나요?

doc.Pages.Count로 모든 페이지를 반복하는 대신 원하는 범위를 반복하세요. 예를 들어 3페이지부터 5페이지까지(0부터 시작하는 인덱스로 2~4) 추출하려면:

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

다운로드하지 않고 이미지를 추출하여 React 앱에 표시할 수 있나요?

예. 다운로드 링크를 만드는 대신 URL.createObjectURL(blob)으로 객체 URL을 만들고 이를 <img> 요소의 src로 사용하세요. 위의 추출된 이미지 작업 섹션에서 코드 예제를 참조하세요.

페이지에 이미지가 없으면 어떻게 되나요?

GetImagesInfo는 이미지가 없는 페이지에 대해 빈 배열을 반환합니다. for 루프가 실행되지 않으므로 파일이 생성되지 않고 오류도 발생하지 않습니다. 모든 페이지에서 안전하게 실행할 수 있습니다.

---

참고 항목

• JavaScript(React)에서 PDF에 이미지 추가하는 방법
• JavaScript(React)에서 PDF의 이미지 교체 및 제거
• React 프로젝트에서 Spire.PDF for JavaScript 통합
• Spire.PDF for JavaScript 제품 페이지

Hai ricevuto un report di 40 pagine e ti servono gli otto grafici al suo interno per una presentazione, oppure vuoi estrarre le foto di prodotto dal catalogo di un fornitore. Il problema: un PDF memorizza le immagini in un formato di stream interno che le API integrate del browser non riescono a leggere, quindi non esiste un percorso "clic destro, salva immagine".

Spire.PDF for JavaScript legge quegli stream per te tramite la sua classe PdfImageHelper. GetImagesInfo recupera ogni oggetto immagine presente in una pagina, e il metodo Image.Save di ciascuno la scrive come file autonomo. Tutto viene eseguito nel browser tramite WebAssembly — il PDF non lascia mai il dispositivo e non è coinvolto alcun server o strumento esterno.

In questo articolo imparerai come:

• Recuperare gli oggetti immagine da una pagina PDF con GetImagesInfo
• Salvare ciascuno nel VFS e attivare un download
• Percorrere ogni pagina di un documento multi-pagina
• Applicare uno schema di denominazione coerente ai file estratti
• Usare le immagini estratte direttamente nella tua interfaccia React

---

Prerequisiti

Questa guida presuppone che tu abbia un progetto React con Spire.PDF for JavaScript installato e il modulo WASM inizializzato. Per le istruzioni di configurazione, consulta Integrating Spire.PDF for JavaScript in a React Project.

Ti serviranno:

• Un PDF che contenga immagini, caricato nel VFS
• Il modulo WASM raggiungibile tramite window.wasmModule.spirepdf

---

Estrarre immagini da una singola pagina

Il flusso di estrazione di base recupera tutte le immagini da una pagina, salva ciascuna nel VFS e attiva un download:

1. Carica il PDF nel VFS e aprilo con PdfDocument
2. Ottieni la pagina di destinazione dal documento
3. Chiama GetImagesInfo per recuperare un array di oggetti informativi sulle immagini
4. Scorri l'array, chiamando images[i].Image.Save() per scrivere ciascuna immagine nel VFS
5. Leggi dal VFS e attiva un download nel browser per ogni immagine estratta

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      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;

File immagine estratti dal PDF

Cosa fa il codice:

• helper.GetImagesInfo(page) restituisce un array di oggetti informativi sulle immagini per la pagina specificata. Ogni oggetto ha una proprietà Image che fornisce accesso ai dati dell'immagine.
• images[i].Image.Save({ fileName: outputFileName }) scrive l'immagine nel VFS come file PNG.
• Il pattern lettura VFS + Blob + download è lo stesso usato per l'output PDF, ma con type: 'image/png' invece di type: 'application/pdf'.
• L'estrazione è un'operazione di sola lettura — il documento PDF originale non viene modificato. Se desideri cambiare o rimuovere un'immagine sul posto invece di limitarti a leggerla, consulta Replacing and Removing Images from PDFs in JavaScript (React).

---

Estrarre immagini da tutte le pagine

L'esempio precedente estrae solo dalla prima pagina. Per un documento multi-pagina come un catalogo prodotti o un report annuale, in genere desideri tutte le immagini da ogni pagina. Aggiungi semplicemente un ciclo esterno attraverso le pagine del documento:

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      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);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

Differenza chiave rispetto all'esempio a pagina singola: il ciclo for esterno itera attraverso doc.Pages.Count, e il nome del file include sia il numero di pagina che l'indice dell'immagine (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ecc.) per mantenere organizzati i file estratti.

---

Assegnare un nome ai file estratti

Una strategia di denominazione coerente ti aiuta a tenere traccia di quale immagine provenga da quale pagina e posizione. Ecco i pattern comuni:

Numerazione sequenziale — la più semplice, adatta all'estrazione da una singola pagina:

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

Pagina e indice — ideale per l'estrazione multi-pagina, conserva la posizione di origine:

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

Con marca temporale — utile quando si estrae da più documenti in una sessione:

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

Basato sul nome del documento di origine — aiuta a tenere traccia della provenienza:

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

Lavorare con le immagini estratte

Invece di (o in aggiunta a) attivare i download, puoi usare i dati delle immagini estratte direttamente nella tua applicazione React. Ad esempio, visualizza le immagini estratte in una galleria:

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

Questo approccio ti fornisce URL di oggetti che possono essere usati direttamente negli elementi <img src={url} />, rendendo semplice creare una galleria di anteprima, consentire agli utenti di selezionare immagini specifiche o passare le immagini ad altre parti della tua applicazione. Una volta ottenuti i dati dell'immagine, la logica di disegno per aggiungerla a un PDF è un naturale passo successivo.

Nota: Ricorda di chiamare URL.revokeObjectURL(url) per ogni URL di oggetto quando hai finito di usarlo, per liberare memoria. Se stai visualizzando immagini in una galleria, revoca gli URL quando il componente della galleria viene smontato.

---

FAQ

L'estrazione delle immagini modificherà il PDF originale?

No. L'estrazione delle immagini è un'operazione di sola lettura. GetImagesInfo legge i dati delle immagini dal PDF senza modificare il documento, e Image.Save scrive una copia nel VFS. Il PDF originale rimane invariato.

In quale formato vengono salvate le immagini estratte?

Gli esempi in questo articolo salvano le immagini estratte come file PNG (.png). L'estensione di file che passi a Image.Save determina il formato di output, quindi puoi sceglierne uno diverso se il tuo caso d'uso lo richiede.

Come posso estrarre immagini da un intervallo di pagine specifico?

Invece di scorrere tutte le pagine con doc.Pages.Count, scorri l'intervallo desiderato. Ad esempio, per estrarre dalle pagine da 3 a 5 (con indice a partire da 0: da 2 a 4):

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

Posso estrarre immagini e visualizzarle nella mia app React senza scaricarle?

Sì. Invece di creare un link di download, crea un URL di oggetto con URL.createObjectURL(blob) e usalo come src di un elemento <img>. Consulta la sezione Lavorare con le immagini estratte qui sopra per un esempio di codice.

Cosa succede se una pagina non contiene immagini?

GetImagesInfo restituisce un array vuoto per le pagine senza immagini. Il ciclo for semplicemente non viene eseguito, quindi non vengono generati file e non vengono lanciati errori. È sicuro eseguirlo su qualsiasi pagina.

---

Vedi anche

• How to Add Images to a PDF in JavaScript (React)
• Replacing and Removing Images from PDFs in JavaScript (React)
• Integrating Spire.PDF for JavaScript in a React Project
• Pagina del prodotto Spire.PDF for JavaScript

Vous avez reçu un rapport de 40 pages et vous avez besoin des huit graphiques qu'il contient pour une présentation, ou vous souhaitez extraire des photos de produits du catalogue d'un fournisseur. Le problème : un PDF stocke les images dans un format de flux interne que les API intégrées du navigateur ne peuvent pas lire, il n'existe donc pas de chemin « clic droit, enregistrer l'image ».

Spire.PDF for JavaScript lit ces flux pour vous grâce à sa classe PdfImageHelper. GetImagesInfo récupère chaque objet image d'une page, et la méthode Image.Save de chacun d'eux l'écrit dans un fichier autonome. Tout s'exécute dans le navigateur via WebAssembly — le PDF ne quitte jamais l'appareil et aucun serveur ni outil externe n'est impliqué.

Dans cet article, vous allez apprendre à :

• Récupérer les objets image d'une page PDF avec GetImagesInfo
• Enregistrer chacun d'eux dans le VFS et déclencher un téléchargement
• Parcourir chaque page d'un document de plusieurs pages
• Appliquer un schéma de nommage cohérent aux fichiers extraits
• Utiliser les images extraites directement dans votre interface React

---

Prérequis

Ce guide suppose que vous disposez d'un projet React avec Spire.PDF for JavaScript installé et le module WASM initialisé. Pour les instructions de configuration, consultez Intégrer Spire.PDF for JavaScript dans un projet React.

Vous aurez besoin de :

• Un PDF contenant des images, chargé dans le VFS
• Le module WASM accessible via window.wasmModule.spirepdf

---

Extraire les images d'une page unique

Le flux d'extraction de base récupère toutes les images d'une page, enregistre chacune dans le VFS et déclenche un téléchargement :

1. Charger le PDF dans le VFS et l'ouvrir avec PdfDocument
2. Obtenir la page cible du document
3. Appeler GetImagesInfo pour récupérer un tableau d'objets d'informations sur les images
4. Parcourir le tableau en appelant images[i].Image.Save() pour écrire chaque image dans le VFS
5. Lire depuis le VFS et déclencher un téléchargement du navigateur pour chaque image extraite

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      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;

Fichiers image extraits du PDF

Ce que fait le code :

• helper.GetImagesInfo(page) renvoie un tableau d'objets d'informations sur les images pour la page spécifiée. Chaque objet possède une propriété Image qui donne accès aux données de l'image.
• images[i].Image.Save({ fileName: outputFileName }) écrit l'image dans le VFS sous forme de fichier PNG.
• Le modèle lecture du VFS + Blob + téléchargement est le même que celui utilisé pour la sortie PDF, mais avec type: 'image/png' au lieu de type: 'application/pdf'.
• L'extraction est une opération en lecture seule — le document PDF d'origine n'est pas modifié. Si vous souhaitez modifier ou supprimer une image sur place plutôt que de simplement la lire, consultez Remplacer et supprimer des images dans des PDF en JavaScript (React).

---

Extraire les images de toutes les pages

L'exemple ci-dessus n'extrait que de la première page. Pour un document de plusieurs pages comme un catalogue de produits ou un rapport annuel, vous voulez généralement toutes les images de chaque page. Il suffit d'ajouter une boucle externe parcourant les pages du document :

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      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);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

Principale différence avec l'exemple d'une seule page : la boucle for externe parcourt doc.Pages.Count, et le nom de fichier inclut à la fois le numéro de page et l'index de l'image (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, etc.) afin de garder les fichiers extraits organisés.

---

Nommer les fichiers extraits

Une stratégie de nommage cohérente vous aide à suivre quelle image provient de quelle page et de quelle position. Voici les modèles courants :

Numérotation séquentielle — la plus simple, adaptée à l'extraction d'une seule page :

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

Page et index — idéal pour l'extraction multi-pages, préserve l'emplacement source :

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

Horodatage — utile lors de l'extraction de plusieurs documents dans une session :

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

Basé sur le nom du document source — aide à suivre l'origine :

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

Travailler avec les images extraites

Au lieu de (ou en plus de) déclencher des téléchargements, vous pouvez utiliser les données d'image extraites directement dans votre application React. Par exemple, affichez les images extraites dans une galerie :

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

Cette approche vous donne des URL d'objet qui peuvent être utilisées directement dans des éléments <img src={url} />, ce qui facilite la création d'une galerie d'aperçu, permet aux utilisateurs de sélectionner des images spécifiques, ou de transmettre les images à d'autres parties de votre application. Une fois que vous disposez des données d'image, la logique de dessin pour les ajouter à un PDF est une étape suivante naturelle.

Remarque : N'oubliez pas d'appeler URL.revokeObjectURL(url) pour chaque URL d'objet lorsque vous avez terminé de l'utiliser afin de libérer de la mémoire. Si vous affichez des images dans une galerie, révoquez les URL lorsque le composant de galerie est démonté.

---

FAQ

L'extraction d'images modifie-t-elle le PDF d'origine ?

Non. L'extraction d'images est une opération en lecture seule. GetImagesInfo lit les données d'image du PDF sans modifier le document, et Image.Save écrit une copie dans le VFS. Le PDF d'origine reste inchangé.

Dans quel format les images extraites sont-elles enregistrées ?

Les exemples de cet article enregistrent les images extraites sous forme de fichiers PNG (.png). L'extension de fichier que vous transmettez à Image.Save détermine le format de sortie ; vous pouvez donc en choisir une autre si votre cas d'usage l'exige.

Comment extraire des images d'une plage de pages spécifique ?

Au lieu de parcourir toutes les pages avec doc.Pages.Count, parcourez la plage souhaitée. Par exemple, pour extraire des pages 3 à 5 (indexées à partir de 0 : 2 à 4) :

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

Puis-je extraire des images et les afficher dans mon application React sans les télécharger ?

Oui. Au lieu de créer un lien de téléchargement, créez une URL d'objet avec URL.createObjectURL(blob) et utilisez-la comme src d'un élément <img>. Consultez la section Travailler avec les images extraites ci-dessus pour un exemple de code.

Que se passe-t-il si une page ne contient aucune image ?

GetImagesInfo renvoie un tableau vide pour les pages sans images. La boucle for ne s'exécute tout simplement pas, donc aucun fichier n'est généré et aucune erreur n'est levée. Cette opération peut être exécutée sans risque sur n'importe quelle page.

---

Voir aussi

• Comment ajouter des images à un PDF en JavaScript (React)
• Remplacer et supprimer des images dans des PDF en JavaScript (React)
• Intégrer Spire.PDF for JavaScript dans un projet React
• Page produit Spire.PDF for JavaScript

Recibió un informe de 40 páginas y necesita los ocho gráficos que contiene para una presentación, o quiere extraer las fotos de productos del catálogo de un proveedor. El problema: un PDF almacena las imágenes en un formato de flujo interno que las API integradas del navegador no pueden leer, por lo que no existe la opción de "clic derecho, guardar imagen".

Spire.PDF for JavaScript lee esos flujos por usted a través de su clase PdfImageHelper. GetImagesInfo recupera todos los objetos de imagen de una página, y el método Image.Save de cada uno la escribe como un archivo independiente. Todo se ejecuta en el navegador mediante WebAssembly: el PDF nunca sale del dispositivo y no interviene ningún servidor ni herramienta externa.

En este artículo aprenderá a:

• Recuperar objetos de imagen de una página PDF con GetImagesInfo
• Guardar cada una en el VFS y desencadenar una descarga
• Recorrer todas las páginas de un documento de varias páginas
• Aplicar un esquema de nombres coherente a los archivos extraídos
• Usar las imágenes extraídas directamente en su interfaz de React

---

Requisitos previos

Este tutorial supone que tiene un proyecto de React con Spire.PDF for JavaScript instalado y el módulo WASM inicializado. Para obtener instrucciones de configuración, consulte Integrar Spire.PDF for JavaScript en un proyecto de React.

Necesitará:

• Un PDF que contenga imágenes, cargado en el VFS
• El módulo WASM accesible a través de window.wasmModule.spirepdf

---

Extraer imágenes de una sola página

El flujo de trabajo básico de extracción recupera todas las imágenes de una página, guarda cada una en el VFS y desencadena una descarga:

1. Cargue el PDF en el VFS y ábralo con PdfDocument
2. Obtenga la página de destino del documento
3. Llame a GetImagesInfo para recuperar una matriz de objetos de información de imagen
4. Recorra la matriz, llamando a images[i].Image.Save() para escribir cada imagen en el VFS
5. Lea desde el VFS y desencadene una descarga del navegador para cada imagen extraída

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      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;

Archivos de imagen extraídos del PDF

Qué hace el código:

• helper.GetImagesInfo(page) devuelve una matriz de objetos de información de imagen para la página especificada. Cada objeto tiene una propiedad Image que proporciona acceso a los datos de la imagen.
• images[i].Image.Save({ fileName: outputFileName }) escribe la imagen en el VFS como un archivo PNG.
• El patrón de lectura del VFS + Blob + descarga es el mismo que se usa para la salida de PDF, pero con type: 'image/png' en lugar de type: 'application/pdf'.
• La extracción es una operación de solo lectura: el documento PDF original no se modifica. Si desea cambiar o eliminar una imagen in situ en lugar de solo leerla, consulte Reemplazar y eliminar imágenes de PDF en JavaScript (React).

---

Extraer imágenes de todas las páginas

El ejemplo anterior solo extrae de la primera página. Para un documento de varias páginas, como un catálogo de productos o un informe anual, normalmente querrá todas las imágenes de cada página. Simplemente agregue un bucle externo que recorra las páginas del documento:

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      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);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

Diferencia clave con el ejemplo de una sola página: el bucle for externo recorre doc.Pages.Count, y el nombre del archivo incluye tanto el número de página como el índice de la imagen (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, etc.) para mantener organizados los archivos extraídos.

---

Nombrar los archivos extraídos

Una estrategia de nombres coherente le ayuda a saber de qué página y posición proviene cada imagen. Estos son los patrones más comunes:

Numeración secuencial: la más sencilla, ideal para la extracción de una sola página:

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

Página e índice: la mejor para la extracción de varias páginas, conserva la ubicación de origen:

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

Con marca de tiempo: útil cuando se extraen imágenes de varios documentos en una misma sesión:

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

Basado en el nombre del documento de origen: ayuda a rastrear el origen:

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

Trabajar con las imágenes extraídas

En lugar de desencadenar descargas (o además de hacerlo), puede usar los datos de las imágenes extraídas directamente en su aplicación React. Por ejemplo, mostrar las imágenes extraídas en una galería:

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

Este enfoque le proporciona URL de objeto que se pueden usar directamente en elementos <img src={url} />, lo que facilita crear una galería de vista previa, permitir que los usuarios seleccionen imágenes específicas o pasar las imágenes a otras partes de su aplicación. Una vez que tenga los datos de la imagen, la lógica de dibujo para agregarla a un PDF es el siguiente paso natural.

Nota: Recuerde llamar a URL.revokeObjectURL(url) para cada URL de objeto cuando termine de usarla, a fin de liberar memoria. Si muestra imágenes en una galería, revoque las URL cuando el componente de la galería se desmonte.

---

Preguntas frecuentes

¿La extracción de imágenes modifica el PDF original?

No. La extracción de imágenes es una operación de solo lectura. GetImagesInfo lee los datos de la imagen del PDF sin modificar el documento, y Image.Save escribe una copia en el VFS. El PDF original permanece sin cambios.

¿En qué formato se guardan las imágenes extraídas?

Los ejemplos de este artículo guardan las imágenes extraídas como archivos PNG (.png). La extensión de archivo que pase a Image.Save determina el formato de salida, por lo que puede elegir otra diferente si su caso de uso lo requiere.

¿Cómo extraigo imágenes de un rango de páginas específico?

En lugar de recorrer todas las páginas con doc.Pages.Count, recorra el rango que desee. Por ejemplo, para extraer de las páginas 3 a 5 (con índice basado en 0: 2 a 4):

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

¿Puedo extraer imágenes y mostrarlas en mi aplicación React sin descargarlas?

Sí. En lugar de crear un enlace de descarga, cree una URL de objeto con URL.createObjectURL(blob) y úsela como src de un elemento <img>. Consulte la sección Trabajar con las imágenes extraídas anterior para ver un ejemplo de código.

¿Qué pasa si una página no tiene imágenes?

GetImagesInfo devuelve una matriz vacía para las páginas sin imágenes. El bucle for simplemente no se ejecuta, por lo que no se generan archivos ni se producen errores. Es seguro ejecutarlo en cualquier página.

---

Véase también

• Cómo agregar imágenes a un PDF en JavaScript (React)
• Reemplazar y eliminar imágenes de PDF en JavaScript (React)
• Integrar Spire.PDF for JavaScript en un proyecto de React
• Página de producto de Spire.PDF for JavaScript

Sie haben einen 40-seitigen Bericht erhalten und benötigen die acht darin enthaltenen Diagramme für eine Präsentation, oder Sie möchten Produktfotos aus einem Lieferantenkatalog herausziehen. Der Haken: Ein PDF speichert Bilder in einem internen Stream-Format, das die integrierten APIs des Browsers nicht lesen können, es gibt also keinen Weg über "Rechtsklick, Bild speichern".

Spire.PDF für JavaScript liest diese Streams für Sie über seine Klasse PdfImageHelper aus. GetImagesInfo ruft jedes Bildobjekt auf einer Seite ab, und die Methode Image.Save jedes Objekts schreibt es als eigenständige Datei heraus. Alles läuft im Browser über WebAssembly — das PDF verlässt niemals das Gerät, und es sind kein Server und kein externes Tool beteiligt.

In diesem Artikel erfahren Sie, wie Sie:

• Bildobjekte aus einer PDF-Seite mit GetImagesInfo abrufen
• Jedes davon im VFS speichern und einen Download auslösen
• Jede Seite in einem mehrseitigen Dokument durchlaufen
• Ein einheitliches Benennungsschema auf die extrahierten Dateien anwenden
• Die extrahierten Bilder direkt in Ihrer React-Oberfläche verwenden

---

Voraussetzungen

Diese Anleitung setzt voraus, dass Sie ein React-Projekt mit installiertem Spire.PDF für JavaScript und initialisiertem WASM-Modul haben. Anweisungen zur Einrichtung finden Sie unter Integrieren von Spire.PDF für JavaScript in ein React-Projekt.

Sie benötigen:

• Ein PDF, das Bilder enthält und in das VFS geladen wird
• Das WASM-Modul, erreichbar über window.wasmModule.spirepdf

---

Bilder aus einer einzelnen Seite extrahieren

Der grundlegende Extraktionsablauf ruft alle Bilder von einer Seite ab, speichert jedes im VFS und löst einen Download aus:

1. Laden Sie das PDF in das VFS und öffnen Sie es mit PdfDocument
2. Holen Sie die Zielseite aus dem Dokument
3. Rufen Sie GetImagesInfo auf, um ein Array von Bildinfo-Objekten abzurufen
4. Durchlaufen Sie das Array und rufen Sie images[i].Image.Save() auf, um jedes Bild in das VFS zu schreiben
5. Lesen Sie aus dem VFS und lösen Sie für jedes extrahierte Bild einen Browser-Download aus

function App() {
  const extractImagesFromPdf = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check if the WASM module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file into VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Get the first page
    let page = doc.Pages.get_Item(0);

    // Create a PdfImageHelper object and get the image information on the first page
    let helper = new pdfModule.PdfImageHelper();
    let images = helper.GetImagesInfo(page);

    // Iterate through the images on the page, save each as a separate image file, and trigger download
    for (let i = 0; i < images.length; i++) {
      const outputFileName = `ExtractedImage_${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      // Read the extracted image file from VFS and trigger download
      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;

Aus dem PDF extrahierte Bilddateien

Was der Code macht:

• helper.GetImagesInfo(page) gibt ein Array von Bildinfo-Objekten für die angegebene Seite zurück. Jedes Objekt verfügt über eine Image-Eigenschaft, die Zugriff auf die Bilddaten bietet.
• images[i].Image.Save({ fileName: outputFileName }) schreibt das Bild als PNG-Datei in das VFS.
• Das Muster aus VFS-Lesen + Blob + Download ist dasselbe wie bei der PDF-Ausgabe, jedoch mit type: 'image/png' statt type: 'application/pdf'.
• Die Extraktion ist ein schreibgeschützter Vorgang — das ursprüngliche PDF-Dokument wird nicht verändert. Wenn Sie ein Bild direkt ersetzen oder entfernen möchten, anstatt es nur auszulesen, lesen Sie Ersetzen und Entfernen von Bildern in PDFs mit JavaScript (React).

---

Bilder aus allen Seiten extrahieren

Das obige Beispiel extrahiert nur aus der ersten Seite. Bei einem mehrseitigen Dokument wie einem Produktkatalog oder Jahresbericht möchten Sie in der Regel alle Bilder von jeder Seite. Fügen Sie einfach eine äußere Schleife über die Seiten des Dokuments hinzu:

const extractAllImages = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let imageCount = 0;

  // Loop through all pages in the document
  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    // Extract each image on this page
    for (let i = 0; i < images.length; i++) {
      imageCount++;
      const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
      images[i].Image.Save({ fileName: outputFileName });

      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);
    }
  }

  console.log(`Total images extracted: ${imageCount}`);
  doc.Close();
};

Wichtigster Unterschied zum Einzelseiten-Beispiel: Die äußere for-Schleife durchläuft doc.Pages.Count, und der Dateiname enthält sowohl die Seitenzahl als auch den Bildindex (Page1_Image1.png, Page1_Image2.png, Page2_Image1.png usw.), um die extrahierten Dateien organisiert zu halten.

---

Benennung extrahierter Dateien

Eine einheitliche Benennungsstrategie hilft Ihnen nachzuvollziehen, welches Bild von welcher Seite und Position stammt. Hier sind gängige Muster:

Fortlaufende Nummerierung — am einfachsten, gut für die Extraktion einzelner Seiten:

const outputFileName = `ExtractedImage_${i + 1}.png`;
// ExtractedImage_1.png, ExtractedImage_2.png, ...

Seite und Index — am besten für die Extraktion mehrerer Seiten, bewahrt die Quellposition:

const outputFileName = `Page${pageIndex + 1}_Image${i + 1}.png`;
// Page1_Image1.png, Page1_Image2.png, Page2_Image1.png, ...

Mit Zeitstempel — nützlich bei der Extraktion aus mehreren Dokumenten in einer Sitzung:

const timestamp = Date.now();
const outputFileName = `Extracted_${timestamp}_Page${pageIndex + 1}_${i + 1}.png`;

Basierend auf dem Namen des Quelldokuments — hilft, die Herkunft nachzuvollziehen:

const sourceName = 'Business_Data_Overview';
const outputFileName = `${sourceName}_p${pageIndex + 1}_img${i + 1}.png`;
// Business_Data_Overview_p1_img1.png, ...

---

Arbeiten mit extrahierten Bildern

Anstatt Downloads auszulösen (oder zusätzlich dazu) können Sie die extrahierten Bilddaten direkt in Ihrer React-Anwendung verwenden. Zeigen Sie beispielsweise die extrahierten Bilder in einer Galerie an:

const extractAndDisplay = async () => {
  const pdfModule = window.wasmModule?.spirepdf;
  if (!pdfModule) return;

  await window.spire.FetchFileToVFS('Business_Data_Overview.pdf', "", `${process.env.PUBLIC_URL}/data/`);

  let doc = new pdfModule.PdfDocument();
  doc.LoadFromFile('Business_Data_Overview.pdf');

  let helper = new pdfModule.PdfImageHelper();
  let extractedImageUrls = [];

  for (let pageIndex = 0; pageIndex < doc.Pages.Count; pageIndex++) {
    let page = doc.Pages.get_Item(pageIndex);
    let images = helper.GetImagesInfo(page);

    for (let i = 0; i < images.length; i++) {
      const tempName = `temp_p${pageIndex + 1}_${i + 1}.png`;
      images[i].Image.Save({ fileName: tempName });

      const fileArray = window.dotnetRuntime.Module.FS.readFile(tempName);
      const blob = new Blob([fileArray], { type: 'image/png' });
      const url = URL.createObjectURL(blob);
      extractedImageUrls.push(url);
    }
  }

  doc.Close();

  // Now you have an array of object URLs you can use in <img> tags
  // setExtractedImages(extractedImageUrls); // if using state
  console.log(`Extracted ${extractedImageUrls.length} images ready for display`);
};

Dieser Ansatz liefert Ihnen Objekt-URLs, die direkt in <img src={url} />-Elementen verwendet werden können, sodass es einfach ist, eine Vorschaugalerie zu erstellen, Benutzer bestimmte Bilder auswählen zu lassen oder die Bilder an andere Teile Ihrer Anwendung weiterzugeben. Sobald Sie die Bilddaten haben, ist die Zeichenlogik zum Hinzufügen in ein PDF ein natürlicher nächster Schritt.

Hinweis: Denken Sie daran, für jede Objekt-URL URL.revokeObjectURL(url) aufzurufen, wenn Sie sie nicht mehr benötigen, um Speicher freizugeben. Wenn Sie Bilder in einer Galerie anzeigen, widerrufen Sie die URLs, wenn die Galeriekomponente ausgehängt wird.

---

FAQ

Verändert die Extraktion von Bildern das ursprüngliche PDF?

Nein. Die Bildextraktion ist ein schreibgeschützter Vorgang. GetImagesInfo liest die Bilddaten aus dem PDF, ohne das Dokument zu verändern, und Image.Save schreibt eine Kopie in das VFS. Das ursprüngliche PDF bleibt unverändert.

In welchem Format werden extrahierte Bilder gespeichert?

Die Beispiele in diesem Artikel speichern extrahierte Bilder als PNG-Dateien (.png). Die Dateierweiterung, die Sie an Image.Save übergeben, bestimmt das Ausgabeformat, sodass Sie ein anderes wählen können, wenn Ihr Anwendungsfall dies erfordert.

Wie extrahiere ich Bilder aus einem bestimmten Seitenbereich?

Anstatt mit doc.Pages.Count über alle Seiten zu iterieren, durchlaufen Sie Ihren gewünschten Bereich. Um beispielsweise aus den Seiten 3 bis 5 (0-basiert: 2 bis 4) zu extrahieren:

for (let pageIndex = 2; pageIndex <= 4 && pageIndex < doc.Pages.Count; pageIndex++) {
  let page = doc.Pages.get_Item(pageIndex);
  let images = helper.GetImagesInfo(page);
  // ... save and download each image
}

Kann ich Bilder extrahieren und in meiner React-App anzeigen, ohne sie herunterzuladen?

Ja. Anstatt einen Download-Link zu erstellen, erstellen Sie eine Objekt-URL mit URL.createObjectURL(blob) und verwenden Sie sie als src eines <img>-Elements. Ein Codebeispiel finden Sie im obigen Abschnitt Arbeiten mit extrahierten Bildern.

Was ist, wenn eine Seite keine Bilder hat?

GetImagesInfo gibt für Seiten ohne Bilder ein leeres Array zurück. Die for-Schleife wird einfach nicht ausgeführt, sodass keine Dateien erzeugt und keine Fehler ausgelöst werden. Dies kann sicher auf jeder Seite ausgeführt werden.

---

Siehe auch

• Wie man Bilder mit JavaScript (React) zu einem PDF hinzufügt
• Ersetzen und Entfernen von Bildern in PDFs mit JavaScript (React)
• Integrieren von Spire.PDF für JavaScript in ein React-Projekt
• Produktseite von Spire.PDF für JavaScript