KDAN | Develop A PDF Image Editor with ComPDF Web SDK (JavaScript)

Develop A PDF Image Editor with ComPDF Web SDK (JavaScript)

This update is originally posted by our partner, Click here to view their original article.

Edit Images in PDFs Directly in Your Web Application

In many industries, working with PDFs goes beyond text updates. Teams frequently need to modify images embedded within PDF documents. For example, marketing teams and graphic designers often adjust visuals in brochures, promotional materials, presentations, and branded assets. Common tasks include inserting new images, cropping existing ones, adjusting opacity, or replacing outdated graphics.

Because of these needs, image editing has become an essential capability in modern PDF solutions.

Why Enable PDF Image Editing in a Web App?

Providing image editing directly within a browser-based PDF editor offers significant advantages.

1. No Software Installation Required

Web-based tools remove the need for users to download and install desktop applications. This saves time, simplifies onboarding, and avoids compatibility issues across different systems.

2. Cross-Platform Accessibility

A browser-based PDF editor works across operating systems and devices. Whether users are on Windows, macOS, tablets, or smartphones, they can edit PDF images without worrying about platform limitations—as long as they have a web browser.

As user expectations continue to grow, developers are increasingly adding advanced PDF capabilities to their web platforms. Image editing features, in particular, enhance usability and provide a more complete document workflow experience.

Image Editing Support in ComPDF Web SDK (v2.3.0)

ComPDF Web SDK version 2.3.0 introduces built-in image editing functionality for web applications. Developers can integrate these capabilities directly into their platforms, enabling end users to:

Add images to PDFs
Delete images
Move and reposition images
Rotate and flip images
Replace existing images
Crop images
Export images
Adjust image transparency

The SDK is designed for smooth integration, helping teams deploy PDF image editing with minimal setup effort.

Before beginning your implementation, we recommend testing the Web Demo to evaluate performance and explore the available image editing features firsthand.

How to Integrate Image Editing with ComPDF for Web?

1. Install ComPDF Web SDK on GitHub/ NPM

Before integration, ensure you are running the latest stable version of Node.js. You can then install the ComPDF Web SDK via GitHub or NPM, depending on your development workflow.

2. Figure Out Package Structure

Familiarizing yourself with the SDK package contents can help streamline development. The package includes:

ComPDF-Web-Demo – Sample web projects demonstrating SDK functionality
Lib – Core library files for ComPDF Web SDK
ComPDF Web Demo.pdf – Developer documentation and API reference
Core&UI.txt – Third-party usage agreements
Legal.txt – Legal and copyright details
Release_Note.txt – Version updates and release information

Import and Initialize SDK in the Project

ComPDF Web SDK supports multiple frameworks, including Vanilla JavaScript, Vue, and others. Using Vanilla JavaScript as an example, you can quickly build a basic web application capable of rendering and interacting with PDF documents.

Please note that a valid license is required to run the SDK in your project. You can request a free 30-day trial license to evaluate and integrate the solution.

Step 1. Create index.html

Step 2. Add script tag and initialize ComPDFViewer for Web in JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>ComPDF Web Viewer</title> </head> <!– Import WebViewer as a script tag –> <script src=’@compdfkit/webviewer.global.js’></script> <body> <div id=”app” style=”width: 100%; height: 100vh;”></div> <script> let docViewer = null; ComPDFViewer.init({ pdfUrl: ‘/webviewer/example/developer_guide_web.pdf’, license: ‘Input your license here’ }, document.getElementById(‘app’)).then((core) => { docViewer = core.docViewer; docViewer.addEvent(‘documentloaded’, async () => { console.log(‘document loaded’); }) }) </script> </body> </html>

Step 3. Set a server environment To show in the localhost, we need to set a server environment

npm install -g http-server

Step 4. Serve your website

http-server -a localhost -p 8080

Step 5. Open http://localhost:8080 on your browser. Then you will be able to see the PDF file you want to display.

Configure PDF Image Editing

1. Initialize the Editing Mode

Before editing, you should initialize editing mode. ComPDF provides methods to initialize editing mode. The following code shows you how to initialize the editing mode:

docViewer.startPDFContentEditMode()

2. Add, Move, or Delete Image

ComPDF provides basic interactive capabilities by default, allowing users to create and delete images, drag and drop to move the position of images, resize images, etc. The following code shows how to add images to a PDF:

// Insert Image. docViewer.contentEditAnnotationsManager.addImageEditor({ pageNumber: 1, rect: { left: 268, top: 100, right: 308, bottom: 138 }, imageBase64: ‘…’ // Base64 format image data. })

3. Edit Image Properties

ComPDF supports modifying image properties, such as rotating, cropping, mirroring, and setting transparency. This example shows how to rotate an image and set it to semi-transparent:

const editAnnotation = await docViewer.contentEditAnnotationsManager.getEditAnnotation(1)[0] editAnnotation.setTextStyle({ color: ‘#000000’, opacity: 60, fontSize: 22, fontFamily: ‘Times-Roman’, fontStyle: ‘bold’ })

End Image Editing and Save

After completing edits, you can save changes and exit the Editing mode by following:

docViewer.endPDFContentEditMode()

Final Words

Editing images of PDFs on a Web application is very convenient and efficient, which can be achieved on a browser rather than the extra software. ComPDF for Web offers seamless integration and easy initialization, simplifying the process of embedding the image editor into Web applications. Contact us to streamline your workflow right now!

Comprehensive Document Processing Solutions for {Developers}

Contact us Today to explore how ComPDF enhances your apps and systems with more intelligent and efficient document viewing, editing, signing, converting, parsing, and data extraction.

Driving Digital Innovation for the Future

KDAN provides a diverse range of AI-driven workflow and data solutions, including digital document management, eSignature, and data analytics services.

View Solution

Blog, KDAN Blog