How to Convert and Merge Images into a Single PDF Offline

Whether scanning paper documents with your phone, consolidating receipts for an expense report, or zipping together portfolio mockups, merging separate image files (like JPG, PNG, or WebP) into a single, unified PDF document is a common task. In this tutorial, we explain the step-by-step process of converting and stitching images into a PDF offline, directly in your browser.

The Traditional Way vs. The Secure Way

Traditionally, converting images to a PDF meant using server-side online converters. You would upload your receipts or scans to a third-party website, where they were stitched together on their cloud servers. For sensitive papers (like signed agreements, tax receipts, or ID copies), this model presents significant security risks. If the server is hacked or retains cache backups, your private documents can be compromised.

Offline conversion solves this. By using browser memory APIs, the images are parsed and compiled into a PDF document directly on your computer's local thread. Your files never touch the internet, ensuring complete privacy.

Stitching Math: Fitting Images to Page Frames

When compiling scans into a PDF, the most complex challenge is layout scaling: making sure an image of arbitrary dimensions fits neatly onto a standard document page (like A4 or US Letter) without being distorted or cut off.

To do this, client-side scripts calculate the **aspect ratio** of each image:

• The script reads the image width and height to calculate the ratio: \(\text{Ratio} = \text{Width} / \text{Height}\).
• It defines the standard boundaries of the target page (e.g., A4 dimensions: 595 x 842 points).
• If the image is wider than it is tall (landscape), it scales the image width to fit the page width, then calculates the matching proportional height.
• If the image is taller than it is tall (portrait), it scales the image height to fit the page height, then scales the width proportionally.
• This ensures the image fits perfectly on the A4 canvas, maintaining its original aspect ratio without distortion.

Stitching Images with jsPDF

The core technology that enables client-side compilation is the **jsPDF** library. The script loads the library, initializes a fresh document layout, and loops through the uploaded images:

1. Each image is loaded as a Data URL in memory (using the HTML5 FileReader API).
2. The script creates a page for each image in the document sequence.
3. It draws the image onto the page canvas using the scaling math.
4. Once all images are drawn, jsPDF compiles the PDF structure—including the document catalog, cross-reference tables, and binary image streams—entirely in memory.
5. The script triggers the browser’s native download dialog, saving the completed PDF locally.

Steps to Merge Images on LocalFilePress

We have built a simple, premium image-stitching module inside our **Images to PDF** tool. Here is how to use it:

1. Go to the **Images to PDF** tab.
2. Click the upload zone or drag-and-drop multiple image files (JPG, PNG, or WebP) directly into the box.
3. You will see a visual queue of the files you have uploaded, showing their names and file sizes. You can delete items from the queue if you made a mistake.
4. Click "Combine and Download PDF".
5. The browser will compile the file and immediately trigger a download of your completed PDF document.

Because the compilation happens locally in your browser memory sandbox, the files remain entirely private on your device, providing absolute document security.