JAVASCRIPT: How to Compress Image File

Javascript Code to How to Compress Image File and Then Replace the Original Image File Selected by the User with the New Compressed Image Before Uploading to Web Server

Home Short:

Below is all the Javascipt code needed to impressively compress an image file with little to no image quality loss. You can optionally resize and make the image smaller in width and height as well as compress the image filesize for the absolute minimum file size.

// HANDLE TO FILE INPUT
let input = document.querySelector('#filephoto');

///////////////////////////////////////////////////////
// ONCHANGE EVENT FIRED WHEN PERSON SELECTS A PHOTO
///////////////////////////////////////////////////////
input.addEventListener('change', async (e) => {

// HANDLE TO THE IMAGE FILE SELECTED
    let file = e.target.files[0];
    
    // DISPLAY ALERT WITH THE SIZE OF THE IMAGE FILE IN THE HTML FILE IMAGE CONTROL
    alert('The filesize of the image you just selected is ' + Math.round(e.target.files[0].size / 1024) + ' KB');
        
    // GET THE URL OF THE IMAGE IN THE HTML FILE CONTROL  
    let imgsrc = URL.createObjectURL(file);
    
    // PUT THE IMAGE FILE IN THE HTML IMAGE ELEMENT TO SHOW IT   
    document.querySelector('#orig').src = imgsrc;
    
    // SHOW SIZE OF IMAGE BEFORE COMPRESSION
    document.querySelector('#origsize').innerHTML = Math.round(file.size/1024) + ' KB';

// CALL FUNCTION TO COMPRESS IMAGE FILE 30% 
    // (SPECIFY .1 - .9 FOR [quality] THE HIGHER THE NUMBER THE HIGHER THE QUALITY
    let compressedFile = await compressedImage(file, {quality:0.7, type:'image/jpeg',});
    
    // GET THE URL OF THE IMAGE AFTER IT HAS BEEN COMPRESSED
    let newimgsrc = URL.createObjectURL(compressedFile); 
    
    // PUT THE COMPRESSED IMAGE FILE IN THE HTML IMAGE ELEMENT TO SHOW IT 
    document.querySelector('#comp').src = newimgsrc; 
    
    // SHOW NEW SIZE OF IMAGE AFTER COMPRESSION 
    document.querySelector('#compsize').innerHTML = Math.round(compressedFile.size/1024) + ' KB';
           
    // TRANSFER COMPRESSED IMAGE FILE BACK TO THE HTML INPUT
    // SWAPPING ORIGINAL UNCOMPRESSED IMAGE WITH THE COMPRESSED
    let container = new DataTransfer();
    container.items.add(compressedFile);
    e.target.files = container.files;

// DISPLAY ALERT WITH THE COMPRESSED SIZE OF THE IMAGE FILE NOW IN THE HTML FILE IMAGE CONTROL
    alert('The image you originally selected is now compressed and has replaced the original image at the html file control. The filesize of the image sitting in the file control is now ' + Math.round(e.target.files[0].size / 1024) + ' KB' + '. You can now upload this compressed image to your web server.');
});
    
    
///////////////////////////////////////////////////////////////////////////////    
// FUNCTION TO COMPRESS THE IMAGE AS WELL AS TO RESIZE IF WIDER OR TALLER THAN    
///////////////////////////////////////////////////////////////////////////////
let compressedImage = async (file, {quality, type}) => {
 
    // CREATE A BITMAP IMAGE FROM [file] SELECTED BY USER VIA HTML INPUT FILE
    let img = await createImageBitmap(file);

// DISPLAY THE IMAGE IN THE BACKGROUND ON THE CANVAS ELEMENT
    let canv = document.createElement("canvas");
    let conx = canv.getContext("2d");

// CALL FUNCTION TO GET PERCENTAGE TO RESIZE IMAGE IF IMAGE IS
    // WIDER OR TALLER THAN 600 PIXELS. CAN BE ANY AMOUNT YOU WISH
    // IF YOU DO NOT WISH TO RESIZE THE IMAGE THEN JUST SET 
    // [resizeval] TO 1 IE [let resizeval = 1] INSTEAD OF CALLING 
    // THE FUNCTION [resizePercent]
    let resizeval = resizePercent(img, 600, 600);
   
    // APPLY THE NEW WIDTH AND HEIGHT BASED UPON RESIZE FUNCTION ABOVE
    let canvw = (img.width * resizeval);
    let canvh = (img.height * resizeval);

// SET THE NEW CANVAS WIDTH AND HEIGHT
    canv.width  = canvw;
    canv.height = canvh;

// DRAW THE IMAGE ACCORDING TO THE DESIRE WIDTH AND HEIGHT
    conx.drawImage(img, 0, 0, canvw, canvh);

// TO TURN THE CANVAS IMAGE BACK TO A FILE IT MUST FIRST BE CONVERTED TO BLOB ...
    let blob = await new Promise((resolve) => canv.toBlob(resolve, type, quality));

// ... THEN THE BLOB CAN BE CONVERTED BACK TO A FILE WHICH
    // YOU WILL THEN RETURN THIS FILE TO THE FUNCTION CALLER
    return new File([blob], file.name, {type: blob.type,});
};
    
    
///////////////////////////////////////////////////
// FUNCTION TO RESIZE THE IMAGE IF IT IS TOO BIG.
// THIS WILL ALSO REDUCE THE FILE SIZE EVEN FURTHER
///////////////////////////////////////////////////
function resizePercent(img, maxwidth = 600, maxheight = 600){

// GET THE PERCENTAGE YOU HAVE RESIZE THE IMAGE BY TO
  // ENSURE [maxwidth] AND [maxheight] ARE NOT EXCEEDED
  let percw = (maxwidth / img.width);
  let perch = (maxheight / img.height);
  
  // IF [percw] AND [perch] ARE GREATER THAN OR = 1 MEANS
  // THE IMAGE DOES NOT RESIZING SO JUST RETURN 1
  if((percw >= 1) && (perch >= 1)){
       return 1;
  }
  
  // RETURN WHICHEVER PERCENT VALUE IS SMALLER
  if(percw < perch){
      return percw;
  }else{
      return perch;
  }
}

Try This Compress Image File Code for Yourself Below

source code home