HTML5: resize a photo before upload

Today, the same colleague of previous post, tell me:

“Your script works great, but if i take a very big image, the upload with 3G data network is sooooo slow! It’s possible to resize the image BEFORE the upload?”

Yes, it’s possible!


Using the File API, and processing the images with the canvas element, we can resize the image before upload it.

Here a small snippet:

In this example, the size of image is forced to 400x300 pixels.

It’s required also a simple change on savetofile.php:

In this version of the script, the image is posted to the form as base64 array, and needs to be decoded when it arrives on server.

The updated source is available on my GIT repository.

Published: January 26 2015