9

When offering photo file uploading, usually the user will have badly compressed and huge (10+ megapixels) JPEG files from their cameras or phones. On the server side, these files will get re-compressed to something like 800x600px and JPEG quality 7 or 8.

Is it (already) possible to do that re-compression on the client side? So that I would only need to transmit some 100kB (800x600px) and not 3 MB or more. Something like:

(1) With javascript's new FileSystem API ( http://slides.html5rocks.com/#filewriter ) it would be possible to read the photo file's data into client side JS.

(2) Then it would be necessary to re-encode the JPEG data, which is possible, but I counld not find any library for that (yet). Anybody knows such a library?

(3) Last step would be to POST the re-compressed JPEG data to the server side for storage and get a URL to the stored photo file back from the server for inclusion into the client's HTML.

I am looking for some jQuery plugin, other JS library or example web page that does this.

1

3 Answers 3

4

Plupload supports html5 resizing of images and then uploading them, it also has fallbacks for unsupported browsers (IE cough cough) in Flash, Silverlight (and antiquated stuff like Google Gears and BrowserPlus).

2

You can load the image onto a canvas element, resize it and then retrieve back the image to upload it.

1
2

Check out this demo: http://makeitsolutions.com/labs/jic

It's a javascript library created by me that solves that problem.

It allows you to compress jpg and png on the client side 100% with javascript and no external libraries required!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.