Estrarre immagini da un PDF in JavaScript (React)

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