在上传 JavaScript 和 PHP 之前压缩多个图像

问：

<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>

使用上面的 javascript 函数，我能够选择一个大图像，在客户端压缩大小并上传到服务器。这非常适合单张图片上传。我想知道是否可以修改此代码以在多文件上传场景中转换所有选定的图像。

所以与其这样做

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

这将是为了

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