Un PDF che hai prodotto lo scorso trimestre circola ancora internamente, ma il suo logo è stato aggiornato il mese scorso e un grafico mostra numeri che non sono più veritieri. Non vuoi ricostruire il documento da zero — ti serve soltanto sostituire l'immagine obsoleta con quella nuova, oppure rimuovere completamente un timbro o una filigrana ormai superati.
Spire.PDF per JavaScript gestisce entrambe le operazioni nel browser tramite la sua classe PdfImageHelper. L'idea di fondo è la stessa per entrambe le operazioni: prima individuare l'immagine sulla pagina, poi agire su di essa. GetImagesInfo legge i metadati dell'immagine, ReplaceImage inserisce il nuovo contenuto preservando la posizione originale, mentre DeleteImage rimuove l'oggetto e lascia lo spazio vuoto. Nessun server, nessun caricamento, nessun Adobe Acrobat.
In questo articolo imparerai come:
- Individuare ogni immagine su una pagina con
GetImagesInfo - Sostituire un'immagine mantenendone la posizione e le dimensioni originali
- Eliminare un'immagine e lasciare uno spazio vuoto pulito
- Scegliere l'immagine giusta in base alla sua posizione quando non ne conosci l'indice
- Pulire le immagini su tutte le pagine di un documento
Prerequisiti
Questo tutorial presuppone che tu abbia un progetto React con Spire.PDF per JavaScript installato e il modulo WASM inizializzato. Se non hai ancora configurato tutto ciò, segui Integrare Spire.PDF per JavaScript in un progetto React.
Ti serviranno:
- Un PDF che contenga già almeno un'immagine, caricato nel VFS
- (Per la sostituzione) un nuovo file immagine da inserire
- Il modulo WASM raggiungibile tramite
window.wasmModule.spirepdf
Come Spire.PDF individua le immagini
Sia la sostituzione che l'eliminazione partono dallo stesso passaggio: capire quali immagini sono presenti sulla pagina e dove si trovano. Il metodo PdfImageHelper.GetImagesInfo(page) restituisce un array di oggetti di informazioni sull'immagine. Ogni oggetto espone:
-
Image— i dati dell'immagine stessa (usati durante la sostituzione, o durante l'estrazione delle immagini dal PDF) -
Bounds— unRectangleFche descrive la posizione e le dimensioni dell'immagine sulla pagina
// 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}`);
}
L'indice dell'array segue l'ordine in cui le immagini compaiono sulla pagina, quindi images[0] è la prima, images[1] la seconda, e così via. Una volta ottenuto questo array, sostituire o eliminare è una singola chiamata a un metodo — trattata nelle due sezioni seguenti.
Sostituire un'immagine
La sostituzione mantiene intatto il layout del documento: la nuova immagine eredita la posizione e le dimensioni del segnaposto originale, quindi nulla intorno ad essa si sposta. I passaggi sono: caricare il PDF e l'immagine di sostituzione nel VFS, aprire il PDF, chiamare GetImagesInfo, quindi chiamare ReplaceImage con l'oggetto di informazioni di destinazione e la nuova immagine.
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 generato dopo la sostituzione di un'immagine
helper.ReplaceImage(images[0], newImage) sostituisce il contenuto dell'immagine all'indice 0 con newImage. La sostituzione avviene nella stessa posizione e con le stesse dimensioni dell'originale. Se l'immagine sostitutiva ha un rapporto d'aspetto diverso, viene allungata per adattarsi al segnaposto originale.
Eliminare un'immagine
L'eliminazione condivide esattamente la stessa configurazione della sostituzione — caricare il PDF, ottenere la pagina, chiamare GetImagesInfo. L'unica differenza è la chiamata finale: invece di ReplaceImage, chiami DeleteImage con l'oggetto di informazioni di destinazione, e l'immagine viene rimossa completamente, lasciando il suo spazio vuoto.
// 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 generato dopo l'eliminazione di un'immagine
helper.DeleteImage({ imageInfo: images[0] }) rimuove l'immagine all'indice 0. Il testo, la grafica e il layout circostanti rimangono intatti — lo spazio che occupava viene semplicemente lasciato vuoto, senza alcun riflusso.
Individuare le immagini per posizione
Quando una pagina contiene diverse immagini, potresti non sapere quale indice dell'array corrisponda a quella che desideri. La proprietà Bounds ti indica dove si trova ciascuna immagine, e IntersectsWith ti permette di agire sulle immagini all'interno di una regione specifica — utile per rimuovere un timbro nell'intestazione o sostituire un grafico che si trova sempre nello stesso punto.
// 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 è un RectangleF con X, Y, Width e Height, tutti espressi in punti (1 punto = 1/72 di pollice). L'origine (0, 0) è l'angolo in alto a sinistra della pagina.
Elaborazione in batch su tutte le pagine
Per agire sulle immagini in un documento composto da più pagine, esegui un ciclo sulla collezione Pages e applica la stessa logica a ogni pagina. L'esempio seguente elimina ogni immagine; sostituisci DeleteImage con ReplaceImage per effettuare invece una sostituzione in batch (carica la nuova immagine una volta sola prima del ciclo).
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);
};
Domande frequenti
Come faccio a trovare l'immagine specifica che voglio modificare?
GetImagesInfo restituisce le immagini nell'ordine della pagina, quindi images[0], images[1], … ti danno la prima, la seconda e così via. Quando l'ordine non è evidente, leggi la proprietà Bounds di ogni oggetto per vedere dove si trova, e usa Bounds.IntersectsWith per individuare le immagini all'interno di una regione nota. Vedi Individuare le immagini per posizione sopra.
La sostituzione o l'eliminazione disturbano il resto della pagina?
No. Entrambe le operazioni agiscono solo sull'oggetto immagine stesso. Una sostituzione mantiene la posizione e le dimensioni del segnaposto originale; un'eliminazione lascia uno spazio vuoto. Testo, grafica e layout non sono interessati, e il documento non viene mai riformattato.
Posso sostituire un'immagine con una che ha un rapporto d'aspetto diverso?
Sì — ReplaceImage allunga la nuova immagine per riempire il segnaposto originale. Se hai bisogno di preservare le proporzioni della nuova immagine, elimina quella vecchia e aggiungi la sostitutiva con DrawImage alle dimensioni esatte che desideri. Vedi Come aggiungere immagini a un PDF in JavaScript (React).
Come faccio a rimuovere ogni immagine da un documento?
Esegui un ciclo su doc.Pages.Count, chiama GetImagesInfo per ogni pagina e DeleteImage su ogni voce — l'esempio Elaborazione in batch su tutte le pagine mostra il codice completo.