Cross-browser JS-only image-resizing prior to upload

Question

What solutions are there for resizing images before uploading with ajax? No flash- silverlight - plugin-solutions whatsoever please.

jQuery-solutions highly preferred.

I am working on a solution with canvas but there seems to be a lack of image quality and browser support for older IEs.

Thanks for your input.

Have you tried anything at all? (Helpful links for asking better questions: [ask], [FAQ]) — tckmn, Mar 28 '13 at 12:34
as you can see here, yes: http://stackoverflow.com/questions/15679299/canvas-drawimage-fails/15679851?noredirect=1#comment22260121_15679851 but no luck so far and no support for older browsers — Raphael Jeger, Mar 28 '13 at 12:40
Can you say what is the purpose of resizing the image. That could help me give you better idea .Please explain your requirement. — udaya, Mar 28 '13 at 13:09
Yes sure... it's a "mobile-first" application where users can post things, also upload images. For saving bandwith, I'd like to be able to pre-resize the images on the client-side. It's not a big problem if it does not work on older browsers IF there is a proper fallback (i.e. just uploading the whole pictures). The form just contains one simple input type file, no drag & drop required, no multiupload. Form submission through ajax. — Raphael Jeger, Mar 28 '13 at 13:11

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

This post may help you: Is there any way to resize a image before saving to Web SQL in HTML5?

The base64 data from toDataURL can be sent to your server and then be processed as you intend it to be.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 28 '13 at 13:22

ngasull

4,206
1
22
36

this looks very good, I just need a proper fallback for not-supported browsers. Seems doable... – Raphael Jeger Mar 28 '13 at 14:22

score 0 · Answer 2 · answered Mar 29 '13 at 09:58

0

@Raphael Jager: use imgresize option in javascript to resize, Here by setting a property say height to a fixed value you can resize the image for coerresponding width for the same aspect ratio.. check gd image library for resizing

answered Mar 29 '13 at 09:58

udaya

9,598
15
48
67

score -2 · Answer 3 · answered Mar 28 '13 at 12:34

-2

Javascript cannot read files locally, on client's computer, for security purposes. Therefore I'm afraid there is no solution.

answered Mar 28 '13 at 12:34

ngasull

4,206
1
22
36

with HTML5 File that's not true I think? – Raphael Jeger Mar 28 '13 at 12:39
@RaphaelJeger - well yes, but older IEs don't support HTML5. – Spudley Mar 28 '13 at 12:56
I wasn't aware of this, sorry about that. Therefore this eventually perfectly seems to become possible ^^" I could just head you to [jQuery image manipulation tools then](http://www.jquery4u.com/plugins/image-manipulation/). Good luck ! – ngasull Mar 28 '13 at 13:00
And indeed, as Spudley says, you have no (little?) hope of reading local images in deprecated browsers. – ngasull Mar 28 '13 at 13:03
thank you blint and Spudley - I'll look into that. For older browsers, I just need a workaround, even if that means non-resized images get uploaded. Of course the images will still be checked server-side and resized if necessary... But I don't want to transfer more data than necessary for mobile users, and they have modern browsers :) – Raphael Jeger Mar 28 '13 at 13:08

Cross-browser JS-only image-resizing prior to upload

3 Answers3