Leyendo archivos locales con <input type = "file">?

Question

He visto algunas demostraciones en las que los chicos de Mozilla soltaban una foto en una Dropbox y luego la editaban localmente en el navegador. Pero ahora no puedo encontrar la demo y necesito cargar imágenes en mi html, luego editarlas con un elemento canvas y luego subirlas al servidor. Creo que hay una forma de hacerlo pero no puedo encontrar ninguna buena explicación. Básicamente necesito tomar una foto en la computadora de mi cliente e insertarla en un elemento canvas sin tocar el servidor. Cualquier ayuda será apreciada.

Answer 1

Es el nuevo File API del W3C (que Mozilla tuvo mucho que ver con). He hecho un par de ejemplos de la API de archivos de respuestas a otras preguntas StackOverflow que pueden ser útiles:

• 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?

ese segundo uno, en particular, espectáculos cargar un archivo de imagen local en un elemento img, que puede usar fácilmente con canvas.

Si desea el aspecto de arrastrar y soltar, también puede consultar el HTML5 Drag and Drop stuff; Artículo relacionado: Google Turns to HTML5 for Gmail’s New Drag-and-Drop Attachments.