Ask HN: Possible to re-compress JPEG on the client before upload?

7 points by yaix 14y ago ↗ HN

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

13 comments

[ 5.3 ms ] story [ 41.8 ms ] thread

wmf 14y ago ↗

You could compile libjpeg with Emscripten.

AshleysBrain 14y ago ↗

How about creating an 800x600 2D canvas, load the huge photo to an Image() object, drawImage() to the canvas at 800x600, then upload via toDataURL()?

TBH this seems to me to be more of a StackOverflow question than Ask HN though.

robertocr 14y ago ↗

"TBH this seems to me to be more of a StackOverflow question than Ask HN though." +1

[dead] pyalot 14y ago ↗

There is a JS jpeg encoder out there, I've used it too. Only downside of course, it's not extremely fast, so encoding huge images might be infeasible (although the introduction of typed arrays might make it a lot faster): http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_jav...

_delirium 14y ago ↗

Plupload appears to do that, but I haven't used it myself: http://www.plupload.com/

thraxil 14y ago ↗

Digging through code a bit, it looks like plupload accomplishes the resize by handing off to Flash or Silverlight, so I don't think it would work in a pure JS environment without either of those.

_delirium 14y ago ↗

Their features matrix claims that it can do JPEG resize in HTML5 in both Firefox 3.5+ and Chrome, but not Safari or Opera, which makes it sound like they have something non-Flash/Silverlight working (otherwise there'd be no Firefox/Chrome/Safari/Opera difference). Haven't dug up where that's implemented, though.

yaix 14y ago ↗

Thanks. I haven't looked through the source yet, but it looks promising. Hope there is no Flash involved.

jensnockert 14y ago ↗

It should be relatively trivial (mechanical) to implement a JPEG encoder in Javascript compatible with most browsers.

More so if you don't care about IE < 10.

yaix 14y ago ↗

Relative to what? Because it looks like nobody has done it yet.

JohnTitus 14y ago ↗

Large images ( > 1 MB or so ) put into a Canvas in Chrome cause Chrome to crash with the frowny face Uh oh. At least it did as of a few months ago, not sure if it's been fixed yet.

alias1 14y ago ↗

From a technical perspective it's definitely possible. I can't remember off hand, but i'm almost certain I came across something that did this before..

A quick google turned up the following:

http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_jav...

https://gist.github.com/1245476

Hope it helps

yaix 14y ago ↗

Thanks. I had seen this encoder before, it has one problem

>> The encoder expects a „CanvasPixelArray“ (as returned by the „getImageData“ method of a canvas).

I'd like to use raw binary data simply read from the local file system, and run it through an encoder.