JavaScript Compress Image Before Upload

JavaScript Compress Image Before Upload
Code Snippet:Frontend Image Compress
Author: dylandy.chang
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 830
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code helps you to compress image size before upload to server. It calculates and displays the original image size in MB when you choose an image. Then, it displays the image, compresses it into WebP format, and reveals the new compressed size in KB. This code is handy for making your web pages load faster by reducing image sizes before uploading them.

How to Compress Image Size Before Upload using JavaScript

1. Include the following HTML structure in your webpage. This code assumes you have an input field for selecting an image, a display area for the image before compression, and a display area for the image after compression.

<input type="file" name="upload-image" id="upload-image" required />
<h2> Before </h2>
<p name="before-compression"></p>
<img src="" class="before" style="display:none;"/>
<canvas style="display: none;"></canvas>
<h2> After </h2>
<p name="after-compression"></p>
<img src="" class="after" style="display:none;"/>

2. You can customize the CSS styles to match your website’s design, but the following code includes basic styling for the elements. Adjust it as needed.

#upload-image{
   display: block;
}
.before, .after{
  max-width: 640px;
}

3. Copy and paste the JavaScript code into your webpage. This code handles the image compression process.

const ReadAndCompress = (e) => {
  const size = `Before Compression: ${(e.target.files[0].size/(1000*1024)).toFixed(2)} MB`;
  document.querySelector("p[name=before-compression]").innerHTML = size;
  const reader = new FileReader();
  reader.readAsDataURL(e.target.files[0]);

  reader.onload = event => {
    const img = document.querySelector("img.before");
    img.src = event.target.result;
    img.style = "display: block";
    img.onload = () => {
      const width = img.width;
      const height = img.height;
      const elem = document.querySelector('canvas');
      elem.width = width;
      elem.height = height;
      const ctx = elem.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      const webp = ctx.canvas.toDataURL("image/webp", 0.5);
      const imgAfter = document.querySelector("img.after");
      imgAfter.src = webp;
      imgAfter.style = "display: block";
      const head = 'data:image/webp;base64,';
      const imgFileSize = (Math.round((webp.length - head.length)*3/4) / (1000)).toFixed(2);
      document.querySelector("p[name=after-compression]").innerHTML =
        `After Compression: ${imgFileSize} KB`;
    },
    reader.onerror = error => console.error(error);
  }
}

document.querySelector("input[name=upload-image]")
.addEventListener("change", (event) => ReadAndCompress(event))

4. To upload the compressed image that is shown as output, you can modify the provided code by adding a function to send the compressed image to your server or a cloud storage service. Here’s a general outline of how you can do it:

<input type="file" name="upload-compressed-image" id="upload-compressed-image" required />
<button id="upload-button">Upload Compressed Image</button>

5. Add an event listener to the new upload button or form to trigger the upload process. You can use the Fetch API or any other method to send the compressed image to your server.

document.querySelector("#upload-button").addEventListener("click", () => {
const compressedImage = document.querySelector("img.after").src;
uploadCompressedImage(compressedImage);
});

function uploadCompressedImage(compressedImage) {
// Use the Fetch API or another method to send 'compressedImage' to your server.
// You may need to handle server-side processing and storage of the uploaded image.
}

Remember that the server-side handling part will depend on your backend technology stack. The code provided here outlines the client-side modifications to initiate the upload process.

That’s all! hopefully, you have successfully created a feature to compress Image size Before Upload. 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