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
GetImagesInfolokalisieren - 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– einRectangleF, 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.