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.

stackoverflow.com/a/51810740/1008999

Endless
– Endless

2021-06-07 12:05:14 +00:00
Commented Jun 7, 2021 at 12:05 — Endless
– Endless, Commented Jun 7, 2021 at 12:05

Jonathan Silva · Accepted Answer · 2021-06-14 22:03:35Z

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

Collectives™ on Stack Overflow

Resize image during upload (Canvas and SimpleImage library)

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related