Programmatically resizing and downloading images

Question

So, I have a list of 1100+ images that need to be resized to 500x500 pixels. I have figured out how to use the HTML5 Canvas to resize images one at a time, but I am having trouble figuring out how to write a function that will take my list of images (either as a text file or zipped folder of images), resize them, and then download them again with a specific name for each one. My HTML is very simple, essentially a canvas and some buttons.

And my Javascript needs work, I still have not quite figured out the file reading part but my canvas and download functions are working properly. I need help structuring a for each statement that can handle all 1100 images.

const button = document.getElementById("button");

window.onload = function () {
  document.getElementById("file").onchange = function () {
    var file = this.files[0];

    var reader = new FileReader();
    reader.onload = function (progressEvent) {
      // Entire file
      document.write(this.result);

      // By lines
      var lines = this.result.split("\n");
      for (var line = 0; line < lines.length; line++) {
        document.write(lines[line]);
      }
    };
    reader.readAsText(file);
  };
};

function buttontest() {
  // Function that gets the drawImage required parameters to
  // resize an image by a scale

  const resizeToWidth = 500;
  const resizeToHeight = 500;

  const getDrawImageParams = (image, scale) => {
    const { naturalWidth: imageWidth, naturalHeight: imageHeight } = image;

    return {
      sx: 0,
      sy: 0,
      sWidth: imageWidth,
      sHeight: imageHeight,
      dx: 0,
      dy: 0,
      dWidth: imageWidth * scale,
      dHeight: imageHeight * scale,
    };
  };
}

<input type="file" name="file" id="file" /><br />

<button
  id="button"
  onClick="canvasTest()"
>
  Canvas
</button>

<input type="button" value="Download - JPG" onclick="downloadCanvas()" />

<h2>Transformed image</h2>

<canvas
  id="myCanvas"
  width="500"
  height="500"
  style="border: 1px solid #d3d3d3"
></canvas>

Any help would be appreciated.