Resize Images on the Client Using JavaScript, Before Uploading them

A guide on resizing images on the client using JavaScript, before uploading them.

Marc van Neerven
JavaScript in Plain English

--

If you’ve worked on SaaS systems where you had to accept image uploads, chances are that you have used some server-side component to resize the uploaded images. Many times, it’s just not acceptable to store raw uploaded photographs, or it’s at least important to limit the pixel size.

But all this server setup isn’t needed. In fact, this one async JavaScript function is all you need. This way, you avoid both using up a lot of bandwidth, unnecessary compute, and RAM usage on the server. And scalability is guaranteed since the server’s task is now scaled out to any device connected to it.

The Network is the Computer 😏

Here it is. The code should be pretty self-explanatory.

Using the function:

And there you have it. Thank you for reading.

Like this? I don’t need you to buy me a coffee, but please clap!

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.

--

--

Transformational (fractional) CTO, Board Advisor, Cloud & SaaS Expert, Code Ninja, Web Standards Advocate, Social Impact Lover