1

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

Community
  • 1
  • 1
Rodrigo Balest
  • 326
  • 10
  • 17

1 Answers1

2

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?

Community
  • 1
  • 1
Lemex
  • 3,772
  • 14
  • 53
  • 87
  • Thanks, but what I really need is a way to post a resized version of a image together with the other form fields. – Rodrigo Balest Jul 31 '12 at 17:41
  • I didn't want to touch the form processing on server side of the actual form (it is generated by a CMS), but I think I have no choice. I tried to change the file data in the input field, but now I know it's impossible due to security reasons. I will try your solution. Thanks! – Rodrigo Balest Jul 31 '12 at 20:05
  • This should work client side if you encode it which will make it a string, its what i do when sending the image within a JSON to the server, could maybe find you an example if that would help? – Lemex Jul 31 '12 at 21:15