Un PDF que vous avez produit le trimestre dernier circule encore en interne, mais son logo a été remanié le mois dernier et un graphique affiche des chiffres qui ne sont plus exacts. Vous ne voulez pas reconstruire le document à partir de zéro — vous avez simplement besoin de remplacer l'image obsolète par la nouvelle, ou de supprimer entièrement un tampon ou un filigrane devenu inutile.
Spire.PDF for JavaScript gère ces deux tâches dans le navigateur via sa classe PdfImageHelper. L'idée de base est la même pour les deux opérations : d'abord localiser l'image sur la page, puis agir dessus. GetImagesInfo lit les métadonnées de l'image, ReplaceImage insère le nouveau contenu tout en préservant l'emplacement d'origine, et DeleteImage supprime l'objet et laisse l'espace vide. Pas de serveur, pas de téléversement, pas d'Adobe Acrobat.
Dans cet article, vous apprendrez à :
- Localiser chaque image d'une page avec
GetImagesInfo - Remplacer une image tout en conservant sa position et sa taille d'origine
- Supprimer une image et laisser un espace vide propre
- Choisir la bonne image par sa position lorsque vous ne connaissez pas son index
- Nettoyer les images sur toutes les pages d'un document
Prérequis
Ce didacticiel suppose que vous disposez d'un projet React avec Spire.PDF for JavaScript installé et le module WASM initialisé. Si ce n'est pas encore fait, suivez Intégrer Spire.PDF for JavaScript dans un projet React.
Vous aurez besoin de :
- Un PDF contenant déjà au moins une image, chargé dans le VFS
- (Pour le remplacement) un nouveau fichier image à échanger
- Le module WASM accessible via
window.wasmModule.spirepdf
Comment Spire.PDF localise les images
Le remplacement et la suppression commencent par la même étape : déterminer quelles images se trouvent sur la page et où elles se situent. La méthode PdfImageHelper.GetImagesInfo(page) renvoie un tableau d'objets d'informations sur les images. Chaque objet expose :
-
Image— les données de l'image elle-même (utilisées lors du remplacement, ou lors de l'extraction d'images à partir du PDF) -
Bounds— unRectangleFdécrivant la position et la taille de l'image sur la page
// 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'index du tableau suit l'ordre d'apparition des images sur la page, donc images[0] est la première, images[1] la deuxième, et ainsi de suite. Une fois ce tableau obtenu, remplacer ou supprimer ne nécessite qu'un seul appel de méthode — abordé dans les deux sections suivantes.
Remplacer une image
Le remplacement préserve la mise en page du document : la nouvelle image hérite de la position et de la taille de l'espace réservé d'origine, donc rien autour d'elle ne se déplace. Les étapes sont les suivantes : charger le PDF et l'image de remplacement dans le VFS, ouvrir le PDF, appeler GetImagesInfo, puis appeler ReplaceImage avec l'objet d'informations cible et la nouvelle image.
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;
Document PDF généré après le remplacement d'une image
helper.ReplaceImage(images[0], newImage) remplace le contenu de l'image à l'index 0 par newImage. Le remplacement s'effectue à la même position et avec les mêmes dimensions que l'original. Si l'image de remplacement a un rapport d'aspect différent, elle est étirée pour s'adapter à l'espace réservé d'origine.
Supprimer une image
La suppression partage exactement la même configuration que le remplacement — charger le PDF, obtenir la page, appeler GetImagesInfo. La seule différence réside dans l'appel final : au lieu de ReplaceImage, vous appelez DeleteImage avec l'objet d'informations cible, et l'image est entièrement supprimée, laissant son espace vide.
// 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] });
Document PDF généré après la suppression d'une image
helper.DeleteImage({ imageInfo: images[0] }) supprime l'image à l'index 0. Le texte, les graphiques et la mise en page environnants restent intacts — l'espace qu'elle occupait est simplement laissé vide, sans reflow.
Cibler les images par position
Lorsqu'une page contient plusieurs images, vous ne savez peut-être pas quel index de tableau correspond à celle que vous souhaitez. La propriété Bounds vous indique où se situe chaque image, et IntersectsWith vous permet d'agir sur les images situées dans une région spécifique — pratique pour effacer un tampon d'en-tête ou remplacer un graphique qui se trouve toujours au même endroit.
// 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 est un RectangleF avec X, Y, Width et Height, tous en points (1 point = 1/72 pouce). L'origine (0, 0) est le coin supérieur gauche de la page.
Traiter par lots sur toutes les pages
Pour agir sur les images d'un document de plusieurs pages, parcourez la collection Pages et exécutez la même logique pour chaque page. L'exemple ci-dessous supprime toutes les images ; remplacez DeleteImage par ReplaceImage pour effectuer un remplacement par lots à la place (chargez la nouvelle image une fois avant la boucle).
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);
};
FAQ
Comment trouver l'image précise que je souhaite modifier ?
GetImagesInfo renvoie les images dans l'ordre de la page, donc images[0], images[1], … vous donnent la première, la deuxième, etc. Lorsque l'ordre n'est pas évident, lisez la propriété Bounds de chaque objet pour voir où il se situe, et utilisez Bounds.IntersectsWith pour faire correspondre les images à l'intérieur d'une région connue. Voir Cibler les images par position ci-dessus.
Le remplacement ou la suppression perturbe-t-il le reste de la page ?
Non. Les deux opérations ne touchent que l'objet image lui-même. Un remplacement conserve la position et la taille de l'espace réservé d'origine ; une suppression laisse un espace vide. Le texte, les graphiques et la mise en page ne sont pas affectés, et le document n'est jamais reflué.
Puis-je remplacer une image par une autre ayant un rapport d'aspect différent ?
Oui — ReplaceImage étire la nouvelle image pour remplir l'espace réservé d'origine. Si vous devez préserver les proportions de la nouvelle image, supprimez l'ancienne et ajoutez la remplaçante avec DrawImage à la taille exacte souhaitée. Voir Comment ajouter des images à un PDF en JavaScript (React).
Comment supprimer toutes les images d'un document ?
Parcourez doc.Pages.Count, appelez GetImagesInfo pour chaque page et DeleteImage sur chaque entrée — l'exemple Traiter par lots sur toutes les pages montre le code complet.