Mobile app version of vmapp.org
Login or Join
Gail5422790

: Upload image file: is compression on client side already possible? When offering photo file uploading, usually the user will have badly compressed and huge (10+ megapixels) JPEG files from their

@Gail5422790

Posted in: #Html5 #Javascript

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 ( 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.

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Gail5422790

3 Comments

Sorted by latest first Latest Oldest Best

 

@Nickens628

Check out this demo: 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!

10% popularity Vote Up Vote Down


 

@Speyer207

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).

10% popularity Vote Up Vote Down


 

@Michele947

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme