Um PDF que você produziu no último trimestre ainda circula internamente, mas seu logotipo foi reformulado no mês passado e um gráfico mostra números que já não são verdadeiros. Você não quer reconstruir o documento do zero — você só precisa trocar a imagem desatualizada pela nova, ou remover completamente um carimbo ou marca d'água obsoleto.
O Spire.PDF para JavaScript realiza ambas as tarefas no navegador por meio de sua classe PdfImageHelper. A ideia central é a mesma para qualquer uma das operações: primeiro localizar a imagem na página, depois agir sobre ela. GetImagesInfo lê os metadados da imagem, ReplaceImage troca o conteúdo por um novo, preservando o local original, e DeleteImage remove o objeto e deixa o espaço em branco. Sem servidor, sem upload, sem Adobe Acrobat.
Neste artigo, você aprenderá como:
- Localizar todas as imagens de uma página com
GetImagesInfo - Substituir uma imagem mantendo sua posição e tamanho originais
- Excluir uma imagem e deixar um espaço em branco limpo
- Escolher a imagem certa pela sua posição quando você não sabe seu índice
- Limpar imagens em todas as páginas de um documento
Pré-requisitos
Este tutorial pressupõe que você tenha um projeto React com o Spire.PDF para JavaScript instalado e o módulo WASM inicializado. Se você ainda não configurou isso, siga Integrando o Spire.PDF para JavaScript em um projeto React.
Você precisará de:
- Um PDF que já contenha pelo menos uma imagem, carregado no VFS
- (Para substituição) um novo arquivo de imagem para trocar
- O módulo WASM acessível via
window.wasmModule.spirepdf
Como o Spire.PDF localiza imagens
Tanto a substituição quanto a exclusão partem do mesmo passo: descobrir quais imagens estão na página e onde elas ficam. O método PdfImageHelper.GetImagesInfo(page) retorna um array de objetos de informação de imagem. Cada objeto expõe:
-
Image— os dados da imagem em si (usados ao substituir, ou ao extrair imagens do PDF) -
Bounds— umRectangleFque descreve a posição e o tamanho da imagem na 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}`);
}
O índice do array segue a ordem em que as imagens aparecem na página, então images[0] é a primeira, images[1] a segunda, e assim por diante. Depois de ter esse array, substituir ou excluir é uma única chamada de método — abordada nas próximas duas seções.
Substituir uma imagem
A substituição mantém o layout do documento intacto: a nova imagem herda a posição e o tamanho do espaço reservado original, então nada ao seu redor se desloca. As etapas são: carregar o PDF e a imagem de substituição no VFS, abrir o PDF, chamar GetImagesInfo e então chamar ReplaceImage com o objeto de informação de destino e a nova imagem.
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 gerado após substituir uma imagem
helper.ReplaceImage(images[0], newImage) troca o conteúdo da imagem no índice 0 por newImage. A troca ocorre na mesma posição e com as mesmas dimensões da original. Se a substituição tiver uma proporção diferente, ela é esticada para caber no espaço reservado original.
Excluir uma imagem
A exclusão compartilha exatamente a mesma configuração da substituição — carregue o PDF, obtenha a página, chame GetImagesInfo. A única diferença é a chamada final: em vez de ReplaceImage, você chama DeleteImage com o objeto de informação de destino, e a imagem é removida totalmente, deixando seu espaço em branco.
// 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 gerado após excluir uma imagem
helper.DeleteImage({ imageInfo: images[0] }) remove a imagem no índice 0. O texto, os gráficos e o layout ao redor permanecem intactos — o espaço que ela ocupava é simplesmente deixado vazio, sem reflow.
Direcionar imagens por posição
Quando uma página contém várias imagens, você pode não saber qual índice do array é o que você deseja. A propriedade Bounds informa onde cada imagem está, e IntersectsWith permite agir sobre imagens dentro de uma região específica — útil para limpar um carimbo de cabeçalho ou trocar um gráfico que sempre fica no mesmo 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 é um RectangleF com X, Y, Width e Height, todos em pontos (1 ponto = 1/72 polegada). A origem (0, 0) é o canto superior esquerdo da página.
Processar em lote em todas as páginas
Para agir sobre imagens em todo um documento com várias páginas, percorra a coleção Pages e execute a mesma lógica em cada página. O exemplo abaixo exclui todas as imagens; troque DeleteImage por ReplaceImage para substituir em lote (carregue a nova imagem uma vez antes do loop).
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);
};
Perguntas frequentes
Como encontro a imagem específica que desejo alterar?
GetImagesInfo retorna as imagens na ordem da página, então images[0], images[1], … fornecem a primeira, a segunda, etc. Quando a ordem não é óbvia, leia a propriedade Bounds de cada objeto para ver onde ele está e use Bounds.IntersectsWith para corresponder a imagens dentro de uma região conhecida. Consulte Direcionar imagens por posição acima.
Substituir ou excluir afeta o restante da página?
Não. Ambas as operações afetam apenas o objeto de imagem em si. Uma substituição mantém a posição original e o tamanho do espaço reservado; uma exclusão deixa uma lacuna em branco. Texto, gráficos e layout não são afetados, e o documento nunca passa por reflow.
Posso substituir uma imagem por outra com proporção diferente?
Sim — ReplaceImage estica a nova imagem para preencher o espaço reservado original. Se você precisar preservar as proporções da nova imagem, exclua a antiga e adicione a substituta com DrawImage no tamanho exato desejado. Consulte Como adicionar imagens a um PDF em JavaScript (React).
Como removo todas as imagens de um documento?
Percorra doc.Pages.Count, chame GetImagesInfo em cada página e DeleteImage em cada entrada — o exemplo Processar em lote em todas as páginas mostra o código completo.