Convert JPG Image to PNG Using JavaScript

This JavaScript code enables you to convert JPG images to PNG. It provides a web interface to select and convert an image from JPG to PNG format. The core functionality includes selecting an image, displaying a preview, and converting it to PNG for download. This tool is helpful for users who need a simple way to change the format of their images from JPG to PNG.

This code simplifies the conversion process, making it accessible to users without technical expertise. It is useful for optimizing images for websites, preserving transparency, and reducing file size for faster loading times.

How to Convert JPG Images to PNG Using JavaScript

1. Copy and paste the following HTML code into your HTML file. This code defines the structure of the image conversion tool. Make sure to place it within the <body> section of your HTML document.

 <div class="container">
    <h1>Image to PNG Converter</h1>
    <form>
      <label for="file-input">Choose an image:</label>
      <label class="file-input" for="file-input">Select Image</label>
      <a href="https://www.free-toolhub.com/"></a>
      <input id="file-input" type="file" />
      <div id="image-preview"></div>
      <button id="convert-btn" type="button">Convert to PNG</button>
      <a download="converted_image.png" href="#" id="download-btn">Download PNG</a>
      <a href="https://www.netcalculation.com/"></a>
      <button class="reset-button" id="reset-btn" type="button">Reset</button>
    </form>
  </div>

2. The following CSS code is to style the tool. You can customize the styles to match your website’s design. Adjust fonts, colors, and layout as needed to integrate seamlessly.

    body {
      font-family: Arial, sans-serif;
    }

    .container {
      background: #fff;
      margin: 0 auto;
      max-width: 500px;
      padding: 20px;
      box-shadow: 1px 2px 16px rgba(0, 0, 0, 0.35);
      border-radius: 0px;
    }

    h1 {
      margin-top: 10px;
    }

    form {
      margin-top: 30px;
    }

    label {
      font-size: 20px;
      display: block;
      margin-bottom: 10px;
    }

    input[type="file"] {
      display: none;
    }

    .file-input {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 0px;
      cursor: pointer;
      font-size: 18px;
      margin-bottom: 20px;
    }
        .container  img{
      width: 100%;
      height: auto;
   }
    #image-preview {
      margin-top: 30px;
      max-width: 400px;
    }
    .reset-button,
     #convert-btn,
    #download-btn {
      margin-top: 20px;
      padding: 12px 20px;
      background-color: #4CAF50;
      color: white;
      border: 0;
      border-radius: 0px;
      cursor: pointer;
      font-size: 18px;
    }
     #download-btn {
         display: none;
   }
    .reset-button {
      background: orange;
    }

    .reset-button:hover {
      background-color: #333;
    }

3. Finally, include the following JavaScript code within your HTML document, preferably just before the closing </body> tag.

    const fileInput = document.getElementById('file-input');
    const convertBtn = document.getElementById('convert-btn');
    const downloadBtn = document.getElementById('download-btn');
    const imagePreview = document.getElementById('image-preview');
    const resetBtn = document.getElementById('reset-btn');

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      if (file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const imageUrl = reader.result;
          imagePreview.innerHTML = `
            <img src="${imageUrl}" alt="Image Preview">
          `;
          downloadBtn.style.display = 'none';
        };
      }
    });

    convertBtn.addEventListener('click', () => {
      const canvas = document.createElement('canvas');
      const img = document.createElement('img');
      img.src = imagePreview.querySelector('img').src;
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(blob => {
        const url = URL.createObjectURL(blob);
        downloadBtn.href = url;
        downloadBtn.style.display = 'block';
      }, 'image/png');
    });

    resetBtn.addEventListener('click', () => {
      fileInput.value = '';
      imagePreview.innerHTML = '';
      downloadBtn.style.display = 'none';
    });

That’s it! Hopefully, you have successfully created a JPG to PNG image converter on your website. Users can effortlessly convert their JPG images to PNG, enhancing the usability and appeal of your website. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	Image to PNG Converter
Author:	santosh uranw
Published:	January 19, 2024
Last Updated:	January 22, 2024
Downloads:	988

License:	MIT
Edit Code online:	View on CodePen

How to Convert JPG Images to PNG Using JavaScript

Similar Code Snippets:

Leave a Comment Cancel reply