Resizing images before upload

An article, posted more than 3 years ago filed in form, canvas, image, data, jpeg & png.

The resolution of photo's increases every year. And while some of that information may be worthy of retaining, not all is. High resolution images come at a price. Not only storage, but, especially in a mobile context, also data transfer. In this post I explain how you could create an uploader that fixes this.

The old form

Traditionally your form would look something like this:

`
  Upload image:
  
  
`

If you want to be forgiving to your end users (and not requiring them to manually resize the images themselves) you could configure your server to accept files > 20MB and resize the images server side.

However, to save bandwidth you you might want to resize the images just before uploading.

Enter canvas

To manipulate pixels we need a canvas. So we need a canvas element.

Note: Canvas support is barely an issue, but if things don’t work we’ll write to code as such that the traditional form submit will continue to work

...

Continue reading...

murb blog