Convert JPG Image to PNG Using JavaScript

Convert jpg Image to png Using JavaScript
Code Snippet:Image to PNG Converter
Author: santosh uranw
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,056
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X