How to Merge Images into PDF with JavaScript

Jun 28, 2024

In our daily work, we may need to take some photos and merge the images into a PDF file. This can be done with many applications. Dynamsoft Document Viewer has made it easier since it can do this in the browser. This process can be integrated in our online website, CRM system, etc.

In this article, we are going to create a web app to merge images into PDF with JavaScript using Dynamsoft Document Viewer.

New HTML File

Create a new HTML file with the following template:

<!DOCTYPE html>
<html>
<head>
  <title>Document Scanner</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <style>
  </style>
</head>
<body>
  <h2>Merge Images into PDF</h2>
  <script>
  </script>
</body>
</html>

Add Dependencies

Include Dynamsoft Document Viewer in the page.

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.css">

Select Files

Next, select files for merging.

Add an input element for selecing multiple files.

<input type="file" name="file" id="file" multiple="multiple">

We can then get the selected files with the following JavaScript:

let fileInput = document.getElementById("file");
let files = fileInput.files;

Merge Images to PDF

Add a button in the page to merge the images to PDF.

HTML:

<button onclick="merge()">Merge into PDF</button>

JavaScript:

Initialize Dynamsoft Document Viewer with a license. You can apply for a license here.

Dynamsoft.DDV.Core.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; // Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init(); 
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());

Create a new document instance using Dynamsoft Document Viewer’s DocumentManager.
```
const doc = Dynamsoft.DDV.documentManager.createDocument();
```

Read files as blob and load them into the document.

let fileInput = document.getElementById("file");
let files = fileInput.files;
for (let index = 0; index < files.length; index++) {
  const file = files[index];
  const source = await readFileAsBlob(file);
  try {
    await doc.loadSource(source);  
  } catch (error) {
    console.log(error);
  }
}
   
function readFileAsBlob(file){
  return new Promise((resolve, reject) => {
    let fileReader = new FileReader();
    fileReader.onload = function(e){
      const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
      resolve(blob);
    };
    fileReader.onerror = function () {
      reject();
    };
    fileReader.readAsArrayBuffer(file);
  })
}

Save the images as PDF.
```
const blob = await doc.saveToPdf();
```

Download the PDF with the following function.

function downloadBlob(blob){
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob);
  link.download = "scanned.pdf";
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(link.href);
}

Use an Editing Interface

Dynamsoft Document Viewer comes with a set of viewers. We can use its EditViewer to view and edit the selected images before merging into a PDF file.

Add a container in the HTML.

<div id="container" style="height:480px;"></div>

Use the following code to start it.

let editViewer = new Dynamsoft.DDV.EditViewer({
  container: "container",
});
editViewer.openDocument(doc.uid);

EditViewer

We can rotate, crop, reorder and delete the images and apply filters for the images.

Source Code

Get the source code to have a try:

https://github.com/tony-xlh/Merge-Images-to-PDF

LANGUAGES

PLATFORMS

FEATURED