It's the new File API from the W3C (which Mozilla had a lot to do with). I've done a couple of File API examples in answers to other StackOverflow questions that may be useful:
- HTML5 File API read as text and binary
- Get Image dimensions using Javascript during file upload
- How to know the size of the image to be uploaded with javascript?
That second one, in particular, shows loading a local image file into an img
element, which you could readily use with a canvas
.
If you want the drag-and-drop aspect, you might also check out the HTML5 Drag and Drop stuff; related article: Google Turns to HTML5 for Gmail’s New Drag-and-Drop Attachments.