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— unRectangleFque 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.