Possible to resize an image (client side) on an html form before upload?

Question

I have a standard html input form that includes a field for uploading a file (image).

I unfortunatly cannot edit the backend php that processes the file, but I need

Answer 1

You can use the new FileReader to let the user select an image from their local file system.

Then you can use canvas to resize the image as needed.

This code lets the user select a local image file.

The image will be scaled to half size on the client side.

Modern browsers support the FileReader (but for IE you need 10+).