Comment peut-on coller des images dans une application Web? Quelles sont les solutions disponibles? HTML 5 Canvas?

Question

Je suis en train de construire un os à nu application web, qui avait l'obligation d'être en mesure de copier une image tout en broswing le Web, puis le coller sur ma page.

Je sais que ce type de fonctionnalité est possible - comme je l'ai collé des images dans gmail en écrivant des messages, et en Tumblr (je crois qu'ils utilisent TinyMCE comme éditeur)

.

Après de longues recherches -. J'ai été attristés par la mauvaise qualité des explications pour les solutions disponibles là-bas

Voici ce que j'ai compris:

$(document).bind('paste', function(e){
console.log(e);
})

l'objet Inspecter événement, il semble que les données ne sont inclus en cas de texte (en chrome de toute façon).

Je suis conscient que IE a un objet clipboardData qui vous donne accès au contenu du presse-papiers.

Je l'ai aussi entendu parler de solutions possibles à l'aide de Flash, Java Applets et HTML 5 Canvas -. Mais je n'ai pas encore été en mesure de trouver de bonnes écriture ups expliquant les solutions

Tout le monde fait avec succès, et peut suggérer les meilleures pratiques?

Answer 1

Vous pouvez utiliser l'API Presse-papiers: http://dev.w3.org /2006/webapi/clipops/clipops.html

Ou vous pouvez faire est d'utiliser Zéro ClipBoard. Il utilise un film Flash invisible et fournit une interface JavaScript pour accéder au presse-papiers.

Answer 2

Cela fonctionne bien dans Chrome. Voici un exemple en direct soutenir l'obtention de données d'image en JavaScript pur, sans serveurs impliqués: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/