PDFs are versatile documents that often contain images to enhance their visual appeal and convey information. The ability to manipulate these images - adding new ones, replacing existing ones, or removing unwanted ones - is a valuable skill. In this article, you will learn how to add, replace, or delete images in a PDF document in React using Spire.PDF for JavaScript .
- Add an Image to a PDF Document in JavaScript
- Replace an Image in a PDF Document in JavaScript
- Remove an Image from a PDF Document in JavaScript
Install Spire.PDF for JavaScript
To get started with manipulating images in PDF in a React application, you can either download Spire.PDF for JavaScript from our website or install it via npm with the following command:
npm i spire.pdf
After that, copy the "Spire.Pdf.Base.js" and "Spire.Pdf.Base.wasm" files to the public folder of your project.
For more details, refer to the documentation: How to Integrate Spire.PDF for JavaScript in a React Project
Add an Image to a PDF Document in JavaScript
Spire.PDF for JavaScript provides the PdfPage.Canvas.DrawImage() method to add an image at a specified location on a PDF page. The main steps are as follows.
- Load the input image into the Virtual File System (VFS).
- Create a PdfDocument object with the wasmModule.PdfDocument.Create() method.
- Add a page to the PDF document using the PdfDocument.Pages.Add() method.
- Load the image using the wasmModule.PdfImage.FromFile() method.
- Specify the size of the image.
- Draw the image at a specified location on the page using the PdfPageBase.Canvas.DrawImage() method.
- Save the PDF document using PdfDocument.SaveToFile() method.
- Trigger the download of the resulting document.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to hold the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during loading
console.error('Failed to load WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to add images in PDF
const AddPdfImage = async () => {
if (wasmModule) {
// Specify the input and output file paths
const inputFileName = "JS.png";
const outputFileName = "DrawImage.pdf";
// Fetch the input file and add it to the VFS
await wasmModule.FetchFileToVFS(inputFileName , '', `${process.env.PUBLIC_URL}/`);
// Create a pdf instance
let pdf = wasmModule.PdfDocument.Create();
// Add a page
let page = pdf.Pages.Add();
// Load the image
let image = wasmModule.PdfImage.FromFile(inputFileName);
// Calculate the scaled width and height of the image
let width = image.Width * 0.6;
let height = image.Height * 0.6;
// Calculate the x-coordinate to center the image horizontally on the page
let x = (page.Canvas.ClientSize.Width - width) / 2;
// Draw the image at a specified location on the page
page.Canvas.DrawImage({image:image, x:x, y: 60, width: width, height: height});
// Save the result file
pdf.SaveToFile({fileName: outputFileName});
// Clean up resources
pdf.Close();
// Read the generated PDF file
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
// Create a Blob object from the PDF file
const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });
// Create a URL for the Blob
const url = URL.createObjectURL(modifiedFile);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Add Images in PDF with JavaScript in React</h1>
<button onClick={AddPdfImage} disabled={!wasmModule}>
Process
</button>
</div>
);
}
export default App;
Run the code to launch the React app at localhost:3000. Once it's running, click the "Process" button to insert image in PDF:
Below is the result file:
Replace an Image in a PDF Document in JavaScript
To replace an image in PDF, you can load a new image and then replace the existing image with the new one through the PdfImageHelper.ReplaceImage() method. The main steps are as follows.
- Load the input file and image into the Virtual File System (VFS).
- Create a PdfDocument object with the wasmModule.PdfDocument.Create() method.
- Load a PDF document using the PdfDocument.LoadFromFile() method.
- Get a specific page through the PdfDocument.Pages.get_Item() method.
- Load an image using PdfImage.FromFile() method.
- Create a PdfImageHelper object with the wasmModule.PdfImageHelper.Create() method.
- Get the image information on the page using the PdfImageHelper.GetImagesInfo() method.
- Load the input image using the wasmModule.PdfImage.FromFile() method.
- Replace an existing image in the page with the new image using the PdfImageHelper.ReplaceImage() method.
- Save the PDF document using PdfDocument.SaveToFile() method.
- Trigger the download of the resulting document.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to hold the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during loading
console.error('Failed to load WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to replace an image in PDF
const ReplacePdfImage = async () => {
if (wasmModule) {
// Specify the input and output file paths
const inputFileName = "DrawImage.pdf";
const inputImageName = "coding1.jpg";
const outputFileName = "ReplaceImage.pdf";
// Fetch the input file and image and add them to the VFS
await wasmModule.FetchFileToVFS(inputFileName , '', `${process.env.PUBLIC_URL}/`);
await wasmModule.FetchFileToVFS(inputImageName , '', `${process.env.PUBLIC_URL}/`);
// Create a pdf instance
let pdf = wasmModule.PdfDocument.Create();
// Load the PDF file
pdf.LoadFromFile({fileName: inputFileName});
// Get the first page
let page = pdf.Pages.get_Item(0);
// Create a PdfImageHelper instance
let helper = wasmModule.PdfImageHelper.Create();
// Get the image information from the page
let images = helper.GetImagesInfo(page);
// Load a new image
let newImage = wasmModule.PdfImage.FromFile(inputImageName);
// Replace the first image on the page with the loaded image
helper.ReplaceImage(images[0], newImage);
// Save the result file
pdf.SaveToFile({fileName: outputFileName});
// Clean up resources
pdf.Close();
// Read the generated PDF file
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
// Create a Blob object from the PDF file
const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });
// Create a URL for the Blob
const url = URL.createObjectURL(modifiedFile);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Replace an Image in PDF with JavaScript in React</h1>
<button onClick={ReplacePdfImage} disabled={!wasmModule}>
Process
</button>
</div>
);
}
export default App;
Remove an Image from a PDF Document in JavaScript
The PdfImageHelper class also provides the DeleteImage() method to remove a specific image from a PDF page. The main steps are as follows.
- Load the input file into the Virtual File System (VFS).
- Create a PdfDocument object with the wasmModule.PdfDocument.Create() method.
- Load a PDF document using the PdfDocument.LoadFromFile() method.
- Get a specific page using the PdfDocument.Pages.get_Item() method.
- Create a PdfImageHelper object with the wasmModule.PdfImageHelper.Create() method.
- Get the image information on the page using the PdfImageHelper.GetImagesInfo() method.
- Delete a specified image on the page using the PdfImageHelper.DeleteImage() method.
- Save the PDF document using PdfDocument.SaveToFile() method.
- Trigger the download of the resulting document.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
// State to hold the loaded WASM module
const [wasmModule, setWasmModule] = useState(null);
// useEffect hook to load the WASM module when the component mounts
useEffect(() => {
const loadWasm = async () => {
try {
// Access the Module and spirepdf from the global window object
const { Module, spirepdf } = window;
// Set the wasmModule state when the runtime is initialized
Module.onRuntimeInitialized = () => {
setWasmModule(spirepdf);
};
} catch (err) {
// Log any errors that occur during loading
console.error('Failed to load WASM module:', err);
}
};
// Create a script element to load the WASM JavaScript file
const script = document.createElement('script');
script.src = `${process.env.PUBLIC_URL}/Spire.Pdf.Base.js`;
script.onload = loadWasm;
// Append the script to the document body
document.body.appendChild(script);
// Cleanup function to remove the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);
// Function to remove images in PDF
const DeletePdfImage = async () => {
if (wasmModule) {
// Specify the input and output file paths
const inputFileName = "DrawImage.pdf";
const outputFileName = "DeleteImage.pdf";
// Fetch the input file and add it to the VFS
await wasmModule.FetchFileToVFS(inputFileName , '', `${process.env.PUBLIC_URL}/`);
// Create a pdf instance
let pdf = wasmModule.PdfDocument.Create();
// Load the PDF file
pdf.LoadFromFile({fileName: inputFileName});
// Get the first page
let page = pdf.Pages.get_Item(0);
// Create a PdfImageHelper instance
let helper = wasmModule.PdfImageHelper.Create();
// Get the image information from the page
let images = helper.GetImagesInfo(page);
// Delete the first image on the page
helper.DeleteImage({imageInfo: images[0]});
// Save the result file
pdf.SaveToFile({fileName: outputFileName});
// Clean up resources
pdf.Close();
// Read the generated PDF file
const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
// Create a Blob object from the PDF file
const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });
// Create a URL for the Blob
const url = URL.createObjectURL(modifiedFile);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Remove an Image from PDF with JavaScript in React</h1>
<button onClick={DeletePdfImage} disabled={!wasmModule}>
Process
</button>
</div>
);
}
export default App;
Get a Free License
To fully experience the capabilities of Spire.PDF for JavaScript without any evaluation limitations, you can request a free 30-day trial license.
