[HTML5] Accès à une image locale et <canvas>

Bonjour,

Je développe pour le plaisir une petite application de découpe d'image personnalisée en HTML5/JS. J'ai joué un peu avec HTML5 et vu qu'on pouvait assez facilement utiliser un canvas pour afficher et manipuler une image pour peu qu'on connaisse le chemin d'accès à celle ci. Je voudrais maintenant passer à l'étape suivante et permettre à l'utilisateur de spécifier une image via un formulaire et d'utiliser JS pour accéder au fichier et charger l'image dans le canvas. J'espère pouvoir ainsi éviter de devoir uploader le fichier sur un serveur, chose qui serait trop longue pour des images lourdes (quelques dizaines de Mo).
J'ai lu dans la référence de HTML5 qu'il est possible d'accéder à un fichier local via FileApi (http://www.w3.org/TR/FileAPI/) mais je n'arrive pas à charger un fichier depuis un objet File() dans un object Image().
J'ai cherché sur le net mais je n'ai rien trouvé à ce sujet. Auriez vous des conseils, des pistes, ou peut être une solution ? Merci d'avance.

PS: je n'ai pas de code à montrer à l'instant, mon code étant resté chez moi, je le posterai ce soir sous forme simplifiée.

Bonjour,

Avec un peu de retard, voilà mon code: http://pastebin.com/PhdKhBYb

Attention, il ne marche qu'avec Chrome, qui est le seul browser a avoir implémenté la File API pour l'instant (enfin d'après ce que j'ai lu).

Comme vous le verrez, lorsqu'on sélectionne une image on a une alerte avec la valeur 0, qui correspond d'après la référence (http://www.w3.org/TR/FileAPI/#dfn-readystate) au statut EMPTY alors que je m'attendrai à avoir un LOADING ou mieux, DONE.

J'ai aussi mis dans la source (mais commenté) un exemple de chargement d'image dans le canvas lorsqu'on connait le chemin relatif.

J'espère que l'un d'entre vous pourra m'aider ou bien m'indiquer où je peux aller chercher de l'aide sur ce sujet.