Resizing the image before downloading, but loading synchronously (not ajax). Is it possible?

Question

I have a form with some fields, including input type = 'file', used to upload images.
I am looking for a way to resize the image selected by this field, but not upload immediately.

I read several guides that describe the following process:
1 - catch the image using the "onchange" event in the file field;
2 - create a canvas element with the desired image size.
3 - draw an image in the canvas element and read its contents.
4 - send image data asynchronously (ajax) using FormData.

I would like to do the same until step 3, and then send the modified image along with the other fields when the user clicks the submit form button.

Does anyone have any ideas? Thank!

Ps: Some posts that ALMOST do what I want:
http://coding.pressbin.com/84/File-API-Resize-photo-before-upload/
Image resizing in HTML5 canvas

Answer 1

If you want to resize the image to save space, try: http://www.researchandtechnology.net/bcif/

This is a JavaScript image compression algorithm.

It may also help: lossless image compression Javascript

base 64 base64 javascript

, ?