Displaying items by tag: PDF React Image

Tuesday, 01 April 2025 01:03

Add, Replace or Remove Images in PDF with JavaScript in React

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:

Package Manager

npm i spire.office

The downloaded product package integrates Spire.Doc for JavaScript, Spire.XLS for JavaScript, Spire.PDF for JavaScript, and Spire.Presentation for JavaScript. To use Spire.PDF for JavaScript functionality, you need to copy the corresponding files (spire.pdf.js, Spire.Pdf.Wasm.zip, spire.common.js, Spire.Common.Wasm.zip, and the _framework folder) to the public folder of your project. Additionally, to ensure proper text rendering, font files can be added to a custom path of your choice. In the following example, the font addition path is: public\static\font.

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() 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() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function' 
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;       
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load spire.pdf.js:', error);
      }
    })();
  }, []);

  const AddPdfImage = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Specify the input and output file paths
      const inputFileName =  "JS.png";
      const outputFileName = "DrawImage.pdf";

      await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);
      // Create a pdf instance
      let pdf =new wasmModule.PdfDocument();

      // 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 = window.dotnetRuntime.Module.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}>
        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:

Run the code to launch the React app at localhost:3000

Below is the result file:

Insert a picture to a specified location on a PDF page

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() 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() 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() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function' 
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;       
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load spire.pdf.js:', error);
      }
    })();
  }, []);

  const ReplacePdfImage = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Specify the input and output file paths
      let inputFileName  = ""ReplaceImage.pdf"";
      await window.spire.FetchFileToVFS(inputFileName , '',  `${process.env.PUBLIC_URL}static/data/`);
     
      const inputImageName = "ChartImage.png";
      await window.spire.FetchFileToVFS(inputImageName , '',  `${process.env.PUBLIC_URL}static/data/`);

      const outputFileName = "ReplaceImage_result.pdf";

      // Create a pdf instance
      let pdf =new wasmModule.PdfDocument();
      
      // 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 =new wasmModule.PdfImageHelper();

      // 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 = window.dotnetRuntime.Module.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}>
        Process
      </button>
    </div>
  );
}


export default App;

Replace a specified existing image with a new image in PDF

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() 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() 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() {
   const [wasmModule, setWasmModule] = useState(null);
   useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.pdf.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function' 
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;       
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load spire.pdf.js:', error);
      }
    })();
  }, []);

  const DeletePdfImage = async () => {
    const wasmModule = window.wasmModule.spirepdf;
    
    if (wasmModule) {
      // Specify the input and output file paths
      let inputFileName  = "DrawImage.pdf";
      await window.spire.FetchFileToVFS(inputFileName , '',  `${process.env.PUBLIC_URL}static/data/`);
    
      const outputFileName = "DeleteImage.pdf";

      // Create a pdf instance
      let pdf =new wasmModule.PdfDocument();

      // 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 =new wasmModule.PdfImageHelper();

      // 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 = window.dotnetRuntime.Module.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.

Published in Image