compress multiple images before upload javascript and php

Question

<input id="upload" type="file" accept=".jpg, .jpeg, .png, .webp" />


<script>
    var fileInput = document.querySelector("#upload");
var originalImage = document.querySelector("#originalImage");

var compressedImage = document.querySelector("#compressedImage");
var resizingElement = document.querySelector("#resizingRange");

var qualityElement = document.querySelector("#qualityRange");
var uploadButton = document.querySelector("#uploadButton");

var compressedImageBlob;

var resizingFactor = 0.8;
var quality = 0.5;

// initializing the compressed image
compressImage(originalImage, resizingFactor, quality);

fileInput.addEventListener("change", async (e) => {
    
  var [file] = fileInput.files;
  
  // storing the original image
  originalImage.src = await fileToDataUri(file);
  
  // compressing the uplodaded image
  originalImage.addEventListener("load", () => {
    compressImage(originalImage, resizingFactor, quality);
  });
  
  return false;
});

resizingElement.oninput = (e) => {
  resizingFactor = parseInt(e.target.value) / 100;
  compressImage(originalImage, resizingFactor, quality);
};

qualityElement.oninput = (e) => {
  quality = parseInt(e.target.value) / 100;
  compressImage(originalImage, resizingFactor, quality);
};



function compressImage(imgToCompress, resizingFactor, quality) {
  // showing the compressed image
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");
  
  var originalWidth = imgToCompress.width;
  var originalHeight = imgToCompress.height;
  var obtainedHeight = (originalHeight / originalWidth) * 420;
  
  var canvasWidth = originalWidth * (420/originalWidth);
  var canvasHeight = originalHeight * (obtainedHeight/originalHeight);
  
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  
  context.drawImage(
    imgToCompress,
    0,
    0,
    originalWidth  * (420/originalWidth),
    originalHeight  * (obtainedHeight/originalHeight)
  );
  
  // reducing the quality of the image
  canvas.toBlob(
    (blob) => {
      if (blob) {
        compressedImageBlob = blob;
        compressedImage.src = URL.createObjectURL(compressedImageBlob);
        document.querySelector("#size").innerHTML = bytesToSize(blob.size);
        var reader = new FileReader();
        reader.readAsDataURL(compressedImageBlob); 
        reader.onloadend = function() {
        var base64data = reader.result;                
        document.querySelector("#image").value = base64data;
        }
        
      }
    },
    "image/jpeg",
    quality
  );
}

function fileToDataUri(field) {
  return new Promise((resolve) => {
    var reader = new FileReader();
    reader.addEventListener("load", () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(field);
  });
}

// source: https://stackoverflow.com/a/18650828
function bytesToSize(bytes) {
  var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
  
  if (bytes === 0) {
    return "0 Byte";
  }
  
  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  
  return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
}

    </script>

With the javascript functions above I am able to select a big image, compress the size on client-side and upload to the server. This works perfectly for a single image upload. I was wondering if it is possible to modify this code to convert all selected images in a multiple file upload scenario.

so instead of doing it for

<input id="upload" type="file" accept=".jpg, .jpeg, .png, .webp" />

it will be for

<input id="uploads" type="file" accept=".jpg, .jpeg, .png, .webp" multiple>

compress multiple images before upload javascript and php

0 Answers0