Building a Simple JPG, JPEG, PNG to PDF Converter Using HTML, CSS, and JavaScript

In today’s digital age, converting image formats to PDFs is a common requirement across multiple applications. Whether it’s for creating documents, presentations, or simply sharing files, converting images to a single, portable PDF file is essential. In this article, I’ll walk you through building a simple JPG, JPEG, PNG to PDF Converter using only HTML, CSS, and JavaScript.

Why Create This Project?

As a developer and someone who is constantly looking to improve my skills, building this image-to-PDF converter project was a perfect opportunity to learn and practice the following:

• Working with File Input in HTML.
• Using JavaScript for file handling and dynamic tasks.
• Generating PDFs directly in the browser using jsPDF.
• Implementing basic CSS for styling and responsiveness.

This project is a great example for beginners looking to dive into web development and efficiently handle user-uploaded files.

Project Overview

The goal of this project is simple: to allow users to upload JPG, JPEG, or PNG images, preview them, and convert them into a single PDF file. Below are the core features:

1. Image Upload: Users can select one or more images to upload.
2. Preview: Uploaded images are previewed before the conversion.
3. PDF Conversion: Once the user clicks the "Convert to PDF" button, the images are merged into a single PDF.
4. Responsive Design: The application is responsive, meaning it works perfectly on both desktop and mobile devices.
5. Clear Button: A reset button is included to allow users to start fresh without reloading the page.

Step-by-Step Walkthrough

Setting Up the HTML Structure

The first step in this project was creating a simple HTML structure with the necessary input fields, buttons, and containers.

<input type="file" id="imageInput" accept="image/jpeg, image/jpg, image/png" multiple>
<div id="preview"></div>
<button id="convertBtn">Convert to PDF</button>
<button id="backBtn">🔄 Reset</button>
        

Here, we created an input field that allows multiple file uploads and accepted JPG, JPEG, and PNG formats. The convertBtn triggers the conversion process, while backBtn resets the form.

Preview Uploaded Images

Once the user selects an image, we need to preview it before proceeding with the PDF conversion.

imageInput.addEventListener('change', (event) => {
  const files = event.target.files;
  for (const file of files) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      preview.appendChild(img);
    };
    reader.readAsDataURL(file);
  }
});         

Generating the PDF with jsPDF

To create the PDF, we utilized the jsPDF library. Here’s the function that converts the uploaded images into a PDF

convertBtn.addEventListener('click', async () => {
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF();

  for (let i = 0; i < imageFiles.length; i++) {
    const img = new Image();
    img.src = imageDataUrl;
    await new Promise(resolve => {
      img.onload = () => {
        const imgWidth = pdf.internal.pageSize.getWidth();
        const imgHeight = (img.height * imgWidth) / img.width;
        if (i > 0) pdf.addPage();
        pdf.addImage(img, 'JPEG', 0, 0, imgWidth, imgHeight);
        resolve();
      };
    });
  }
  pdf.save('converted.pdf');
});
convertBtn.addEventListener('click', async () => {
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF();

  for (let i = 0; i < imageFiles.length; i++) {
    const img = new Image();
    img.src = imageDataUrl;
    await new Promise(resolve => {
      img.onload = () => {
        const imgWidth = pdf.internal.pageSize.getWidth();
        const imgHeight = (img.height * imgWidth) / img.width;
        if (i > 0) pdf.addPage();
        pdf.addImage(img, 'JPEG', 0, 0, imgWidth, imgHeight);
        resolve();
      };
    });
  }
  pdf.save('converted.pdf');
});
        

Challenges Faced

• File Handling: Managing multiple image formats and ensuring compatibility across browsers was tricky. Using the FileReader API was essential for handling image uploads.
• PDF Formatting: Generating a single PDF from multiple images required careful consideration of image dimensions and scaling.
• Cross-Browser Testing: Ensuring the file input and previewing mechanism worked seamlessly across different browsers, especially for file types.

Conclusion

Building this JPG, JPEG, PNG to PDF Converter was a fun and educational experience that allowed me to practice key web development skills. By using HTML, CSS, and JavaScript along with the jsPDF library, I was able to create a fully functional image-to-PDF converter with features like image preview, file handling, and responsive design.

I hope this article inspires you to build similar projects and sharpen your development skills. Stay tuned for more posts where I’ll be diving deeper into other projects and exploring the world of web development!

Call to Action

If you found this project helpful, feel free to connect with me or leave a comment below! Let me know if you’d like me to share the source code or help with any specific web development topics.

Github:- Sahil-Ali-01/Image-to-pdf-converter

Demo:- Site