Pure Javascript image handling library (in binary form, not through DOM)

Question

Since File API will enable access to the content of local files it is now possible to do image resize before upload (a fairly common task) without any additional technology like Flash or Silverlight. Except that I can't find any Javascript library that would be able to handle images in binary form. Is there any? Maybe there is some in Flashe's ECMA script that could be adapted, but I simply can't find anything.

Wreck

Answer 1

Although I haven't find such libs, I have found a way how to accomplish the described task:

• Read image as Data URL
• Load an image into a canvas tag and resize it
• Encode canvas image data into some image format, for example JPG. Or use Canvas.toDataUrl() and then (optionaly) some base64 decoder.

Client side image resizing and upload with pure javascript. That's cool, isn't it?

Wreck

Answer 2

Even if you do find something that understands images in pure javascript, you would still need the DOM to render it, making it incredibly slow.

Chrismatory

I don't want to render it, just upload it via AJAX PUT or POST requests. I'm sure that uploading works since I'm already doing it in my app, I just want to spare my bandwidth by moving the resize computation from server to client. – Wreck

Answer 3

Don't know if this is what you want, but there are some scripts on Userscripts.org that handle images: http://userscripts.org/scripts/show/38736

Luxor

Answer 4

One problem with calavera.info's answer (sorry I cannot seem to comment directly on that answer) is that the call to either CanvasRenderingContext2D.getImageData or Canvas.toDataURL mentioned in the third bullet will fail. They each throw a SECURITY_ERR: DOM Exception 18 as the image is not from the same origin or domain as the document that owns the canvas element. That seems inevitable since the image comes from the local file system (via an input type="file" tag), but the page comes from your web server.

Homoousian

Thanks a lot for a review. When I made a prototype and tried it in Firefox (it was 3.6 or something), everything was fine, so this behavior must be new. That's a pity, especially because I was pointed to this technique directly at whatwg html5 mailing list. I'll have to investigate this, but as always - no time :-(. – Wreck