Resize image during upload (Canvas and SimpleImage library)

Question

My goal is to have the user upload a local image. I draw this image in a canvas element. On top of this canvas element, I create another canvas, which I use to draw boxes on, so that the boxes overlay the uploaded image.

I want the image to be uploaded in a specific size, say maximum 100 width and maximum 100 height. It's not enough for me to have the image merely displayed at max-height and max-width: 100, it physically needs to be resized during the upload process. Because if I put a super big picture in a say 100x100 canvas, then the boxes on top of it become very small and I need them to be the same size regardless what size the image in the canvas is.

Below is the code: HTML:

  <div style="position: relative;">
    <canvas id="can" 
      style="position: absolute; left: 0; top: 0; z-index: 0;max-width:80%;"></canvas>
    <canvas id="box" 
      style="position: absolute; left: 0; top: 0; z-index: 1;max-width:80%;"></canvas>
   </div>

<input type="file" multiple="false" accept="image/*" id="finput" onchange="upload()">

And JS:

function upload() {
  //Get input from file input
  var fileinput = document.getElementById("finput");
  //Make new SimpleImage from file input
  image = new SimpleImage(fileinput);
  
  //Get canvas
  var canvas = document.getElementById("can");
  //Draw image on canvas
  image.drawTo(canvas);
}

I use the simpleImage library because it lets me extract RGB values of the image.

https://stackoverflow.com/a/51810740/1008999 – Endless Jun 07 '21 at 12:05 — Endless, Jun 07 '21 at 12:05

Jonathan Silva · Accepted Answer · 2021-06-14T22:03:35.080

let originalWidth;
let originalHeight;
let imageWidth;
let imageHeight;

const load = result => {
    return new Promise((fulfill, _reject) => {
      let imageObj = new Image();

      imageObj.onload = () => fulfill(imageObj);
      imageObj.src = result;
    });
}

const upload = () => {
    const fileinput = document.getElementById("finput");
    const canvas = document.getElementById("can");

    let context = canvas.getContext("2d");

    const reader = new FileReader();

    reader.onload = event => {
        Promise.all([
            load(event.target.result)
          ])
          .then(images => {
              originalWidth = images[0].width;
              originalHeight = images[0].height;

              imageWidth = originalWidth;
              imageHeight = originalHeight;

              imageWidth = 200; // Fixed value
              // Value proportional to width. Keeping to scale without distorting the image ( recommended )
              imageHeight = originalHeight * (imageWidth / originalWidth);

              context.drawImage(images[0], positionX, positionY, imageWidth, imageHeight);
           })
    }

    reader.readAsDataURL(fileinput);
}

Thank you for the code! I'm trying it out right now however it gives me the errorcode "file is not defined" and this makes me wonder if you should place the code before or after the upload() function or replace it with it completely? I'm trying at the moment to understand what exactly the code does, but I'm fairly new to JS — Maria, Jun 13 '21 at 15:46
@Maria I made some modifications for you to understand better. I don't know what SimpleImage does. But my code resizes the image as it is loaded by FileReader — Jonathan Silva, Jun 14 '21 at 22:06

Resize image during upload (Canvas and SimpleImage library)

1 Answers1