10 ms·
Ask HN: Possible to re-compress JPEG on the client before upload?
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
- wmf 15y agoYou could compile libjpeg with Emscripten.
- AshleysBrain 15y agoHow 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 15y ago"TBH this seems to me to be more of a StackOverflow question than Ask HN though." +1
- pyalot 15y agoThere 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_javascript http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_jav...
- _delirium 15y agoPlupload appears to do that, but I haven't used it myself: http://www.plupload.com/ http://www.plupload.com/
- thraxil 15y agoDigging 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 15y agoTheir 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 15y agoThanks. I haven't looked through the source yet, but it looks promising. Hope there is no Flash involved.
- jensnockert 15y agoIt 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 15y agoRelative to what? Because it looks like nobody has done it yet.
- JohnTitus 15y agoLarge 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 15y agoFrom 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_javascript http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_jav... https://gist.github.com/1245476 https://gist.github.com/1245476 Hope it helps
- yaix 15y agoThanks. 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.