PDF-документ, созданный вами в прошлом квартале, всё ещё распространяется внутри компании, но его логотип был изменён в прошлом месяце, а на одной диаграмме указаны числа, которые уже не соответствуют действительности. Вы не хотите пересоздавать документ с нуля — вам просто нужно заменить устаревшее изображение на новое или полностью удалить устаревший штамп или водяной знак.
Spire.PDF для JavaScript выполняет обе задачи прямо в браузере с помощью своего класса PdfImageHelper. Основная идея одинакова для обеих операций: сначала найти изображение на странице, затем выполнить действие над ним. GetImagesInfo считывает метаданные изображения, ReplaceImage подставляет новое содержимое, сохраняя исходное место, а DeleteImage удаляет объект и оставляет пространство пустым. Никакого сервера, никакой загрузки, никакого Adobe Acrobat.
В этой статье вы узнаете, как:
- Найти все изображения на странице с помощью
GetImagesInfo - Заменить изображение, сохранив его исходное положение и размер
- Удалить изображение и оставить чистое пустое место
- Выбрать нужное изображение по его положению, когда вы не знаете его индекс
- Очистить изображения на всех страницах документа
Предварительные требования
Это руководство предполагает, что у вас есть проект React с установленным Spire.PDF для JavaScript и инициализированным модулем WASM. Если вы ещё не настроили это, следуйте инструкции Интеграция Spire.PDF для JavaScript в проект React.
Вам понадобится:
- PDF-файл, который уже содержит хотя бы одно изображение, загруженный в VFS
- (Для замены) новый файл изображения для подстановки
- Модуль WASM, доступный через
window.wasmModule.spirepdf
Как Spire.PDF находит изображения
И замена, и удаление начинаются с одного и того же шага: определения того, какие изображения есть на странице и где они расположены. Метод PdfImageHelper.GetImagesInfo(page) возвращает массив объектов с информацией об изображениях. Каждый объект предоставляет:
-
Image— сами данные изображения (используется при замене или при извлечении изображений из PDF) -
Bounds— объектRectangleF, описывающий положение и размер изображения на странице
// 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}`);
}
Индекс массива соответствует порядку появления изображений на странице, поэтому images[0] — это первое изображение, images[1] — второе и так далее. Получив этот массив, замена или удаление выполняется одним вызовом метода — об этом рассказывается в следующих двух разделах.
Замена изображения
Замена сохраняет макет документа неизменным: новое изображение наследует положение и размер заполнителя оригинала, поэтому ничего вокруг не сдвигается. Шаги таковы: загрузить PDF и изображение для замены в VFS, открыть PDF, вызвать GetImagesInfo, затем вызвать ReplaceImage с целевым объектом информации и новым изображением.
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;
PDF-документ, созданный после замены изображения
helper.ReplaceImage(images[0], newImage) заменяет содержимое изображения с индексом 0 на newImage. Замена происходит в той же позиции и с теми же размерами, что и оригинал. Если у заменяющего изображения другое соотношение сторон, оно растягивается, чтобы заполнить исходный заполнитель.
Удаление изображения
Удаление использует точно такую же подготовку, как и замена — загрузите PDF, получите страницу, вызовите GetImagesInfo. Единственное отличие — в финальном вызове: вместо ReplaceImage вы вызываете DeleteImage с целевым объектом информации, и изображение полностью удаляется, оставляя своё место пустым.
// 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] });
PDF-документ, созданный после удаления изображения
helper.DeleteImage({ imageInfo: images[0] }) удаляет изображение с индексом 0. Окружающий текст, графика и макет остаются нетронутыми — занимаемое им пространство просто остаётся пустым, без перекомпоновки.
Выбор изображений по положению
Когда на странице несколько изображений, вы можете не знать, какой индекс массива соответствует нужному. Свойство Bounds подсказывает, где находится каждое изображение, а IntersectsWith позволяет воздействовать на изображения внутри определённой области — удобно для удаления штампа в колонтитуле или замены диаграммы, которая всегда находится в одном и том же месте.
// 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 — это RectangleF с X, Y, Width и Height, все значения в пунктах (1 пункт = 1/72 дюйма). Начало координат (0, 0) — это верхний левый угол страницы.
Пакетная обработка на всех страницах
Чтобы выполнить действия с изображениями во всём многостраничном документе, пройдите циклом по коллекции Pages и выполните ту же логику для каждой страницы. Пример ниже удаляет все изображения; замените DeleteImage на ReplaceImage, чтобы вместо этого выполнить пакетную замену (загрузите новое изображение один раз перед циклом).
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);
};
Часто задаваемые вопросы
Как найти конкретное изображение, которое я хочу изменить?
GetImagesInfo возвращает изображения в порядке их следования на странице, поэтому images[0], images[1], … дают вам первое, второе и т. д. Когда порядок неочевиден, прочитайте свойство Bounds каждого объекта, чтобы увидеть, где оно расположено, и используйте Bounds.IntersectsWith для сопоставления изображений внутри известной области. См. раздел Выбор изображений по положению выше.
Нарушают ли замена или удаление остальную часть страницы?
Нет. Обе операции затрагивают только сам объект изображения. Замена сохраняет исходное положение и размер заполнителя; удаление оставляет пустой промежуток. Текст, графика и макет не затрагиваются, и документ никогда не перекомпоновывается.
Могу ли я заменить изображение на такое, у которого другое соотношение сторон?
Да — ReplaceImage растягивает новое изображение, чтобы заполнить исходный заполнитель. Если вам нужно сохранить пропорции нового изображения, удалите старое и добавьте замену с помощью DrawImage точно нужного вам размера. См. Как добавить изображения в PDF на JavaScript (React).
Как удалить все изображения из документа?
Пройдите циклом по doc.Pages.Count, вызовите GetImagesInfo для каждой страницы и DeleteImage для каждой записи — пример Пакетная обработка на всех страницах показывает полный код.