title: How do resize images easily in the browser/before they get to the database?
body: <p>I'm trying to do what I thought would be a super simple thing. I have users uploading images to my site, they can upload any images. I'm using a react carousel to render them. I noticed whilst testing that obviously images different sizes and this makes the carousel a bit weird when rendering them as it can jump between rectangles and squares. so I figured the best way would be resize all the images to the correct size. however, I'm having issues with this.</p>
  <p>I've seen lots of answers online like so: <a href="https://stackoverflow.com/questions/37542887/resize-image-before-upload-using-javascript">resize image before upload using javascript</a></p>
  <p>but I don't want to copy 50~ lines of code and just use if I don't know what it's doing. I searched for packages and found this: <a href="https://www.npmjs.com/package/jimp" rel="nofollow noreferrer">https://www.npmjs.com/package/jimp</a> which looks perfect but I got some errors with this I couldn't figure out.</p>
  <p>all I want when uploading them is to simply check if width != height and then resize to say 300x300. I am using firebase and I am using their resize image tool. again it's really good but you specify dimensions but I think it treats them as maximum rather than actual. obviously I don't want to lose image quality too and stretch the image. so I'm wondering the best way to achieve this.</p>