Aside from editing text, users in almost every industry require to edit images on PDF documents. For instance, graphic designers often need to edit images within PDFs including marketing collateral, brochures, or promotional materials. This includes tasks like inserting, cropping, and adjusting image transparency to create visually appealing designs. Thus, the image editor stands as an essential feature for editing PDFs.
Why Edit Images in PDFs on the WEB App?
Why do users require to edit images of PDFs online? Here are two common but key causes.
• Web applications eliminate the requirement of installing additional software, which not only saves time but also reduces potential compatibility issues.
• The browser-based PDF editor transcends platform limitations. Whether they are on a Windows PC, a macOS device, or even a tablet or smartphone—without encountering device constraints, users can seamlessly edit PDF images as long as they can access the browser.
With the increasing demands for enhanced functionality and a richer user experience, developers tend to integrate the image editing feature into their web applications and seek solutions that offer seamless and straightforward integration.
ComPDFKit Web SDK now adds support for image editing on Version 2.3.0. Developers can effortlessly embed the PDF image editor into Web apps, allowing users to add, delete, move, rotate, flip, replace, export, and crop images in PDF, as well as adjust image transparency.
Before you start integrating our Web SDK 2.3.0 into your Web application, we recommend that you try out our Web Demo first to evaluate the effectiveness and performance of the image editing features.
How to Integrate Image Editing with ComPDFKit for Web?
Get Started
1. Install ComPDFKit Web SDK on GitHub/ NPM
Before integrating ComPDFKit for Web in your browser, make sure you have the latest stable version of Node.js. Then, install ComPDFKit Web SDK on GitHub or NPM.
2. Figure Out Package Structure
It would be better to figure out what the package of ComPDFKit Web SDK includes, improving your developing efficiency.
• "ComPDFKit-Web-Demo" - A folder containing Web sample projects.
• "Lib" - Include the library of ComPDFKit for Web.
• "ComPDFKit Web Demo.pdf" - Developer guide and API reference.
• "Core&UI.txt" - Third-party code usage agreement.
• "Legal.txt" - Legal and copyright information.
• "Release_Note.txt" - Release information.
Import and Initialize SDK in the Project
ComPDFKit for Web supports Vanilla JavaScript, Vue, and more. Here we take Vanilla JavaScript as an example. By following, you will get a simple web application that can display the contents of a specified PDF file.
It is worth noting that a license is required to run the project. It is welcome to contact us to get a free 30-day license for integration.
Step 1. Create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComPDFKit 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>
</body>
</html>
Step 2. Add script tag and initialize ComPDFKitViewer 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>ComPDFKit 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;
ComPDFKitViewer.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. ComPDFKit 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
ComPDFKit 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
ComPDFKit 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'
})
4. 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. ComPDFKit for Web offers seamless integration and easy initialization, simplifying the process of embedding the image editor into Web applications. The good news is that we offer a free 30-day trial license for integrating our SDK into your applications or systems. Contact us to streamline your workflow right now!
