

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

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.<p>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:<p>(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.<p>(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?<p>(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.<p>I am looking for some jQuery plugin, other JS library or example web page that does this. Suggestions
======
_delirium
Plupload appears to do that, but I haven't used it myself:
<http://www.plupload.com/>

~~~
thraxil
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
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.

------
alias1
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...](http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript)

<https://gist.github.com/1245476>

Hope it helps

~~~
yaix
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.

------
AshleysBrain
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
"TBH this seems to me to be more of a StackOverflow question than Ask HN
though." +1

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

------
jensnockert
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
Relative to what? Because it looks like nobody has done it yet.

------
wmf
You could compile libjpeg with Emscripten.

