Resize image before upload, but upload synchronous

问题:

I have a form with some fields, including a input type='file', used to upload images.
I'm searching for a way to resize de image selected by this field, but not upload immediatly.

I've read some tutorials that teaches the following proccess:
1 - catch the image using 'onchange' event on the file field;
2 - create a canvas element with the desired image size;
3 - draw the image in the canvas element and read its contents;
4 - send the image data asynchronously (ajax) using FormData.

I'd like to do the same thing until step 3, and then send the resized image together with the other fields when the user clicks the form's submit button.

Does anybody have any idea?
Thanks!

Ps: Some posts that ALMOST do what I desire:
http://coding.pressbin.com/84/File-API-Resize-photo-before-upload/
Resizing an image in an HTML5 canvas

回答1:

If your wanting to resize the image to save space try: http://www.researchandtechnology.net/bcif/

This is a JavaScript image compression algorithm.

Also this may help: Javascript lossless image compression

And to include it with other form items base 64 encode the image How to convert image into base64 string using javascript

And send it as a string

If your not trying to do this could you please give more information?