smoothjnr.blogg.se - Resize image client side before upload javascript

Determine the correct dimensions for the image.

For image-resizing, as you might have guessed, this involves making use of the HTML canvas element.Įssentially, the process involves the following steps: Modern browsers - both on desktops and mobile devices - are more than capable of doing a bit of additional work. So, to return to the avatar example above, what if your web front-end can instead resize the image before it is uploaded? This means you don’t need to do the additional server-side processing, you store less data, and the process is a little more predictable. Allowing your user clients to upload files directly to a service such as S3 is often quicker and means you don’t need to provision and pay for the bigger server capacity yourself to deal with centralised processing of image files. I’m a big fan of letting the users’ clients do more of the work, since this helps to distribute the compute power required.

However this may mean you need to invest in infrastructure to handle asynchronous or scheduled server-side processing, or additional compute capacity to process image uploads on-the-fly. Lots of tools exist for server-side processing. If you have lots of users, then this time/money saving can be amplified significantly. This is extra data for your users to download each time (which costs them both time and money, and can give a poor sluggish experience) and also means you need to fork out more cash for the additional bandwidth usage.

This is made even more important by modern phones that take photos several megabytes in size.įor example, if you offer an application that allows people to choose an avatar image, you won’t want to render the full multi-MB size image each time it’s shown. Image processing and resizing is a common task in many types of applications.

Disclaimer: The challenge focuses on writing frequency rather than quality, and so posts may not always be fully planned out! This article is one of a series of posts I have written for the 100 Days to Offload challenge.