Since File API will enable access to the content of local files it is now possible to do image resize before upload (a fairly mon 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.

Since File API will enable access to the content of local files it is now possible to do image resize before upload (a fairly mon 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.

• javascript
• flash
• image

4 Answers 4

Although I haven't find such libs, I have found a way how to acplish 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?

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.

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

One problem with calavera.info's answer (sorry I cannot seem to ment 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 es from the local file system (via an input type="file" tag), but the page es from your web server.