¿Cómo se puede pegar imágenes en una aplicación web? ¿Qué soluciones hay disponibles? HTML 5 lienzo?

Question

Actualmente estoy construyendo una aplicación web muy básico huesos, que tenía el requisito de ser capaz de copiar una imagen mientras broswing la web y, a continuación, pegándolo en mi página.

Sé que este tipo de funcionalidad es posible - como he pegado imágenes en Gmail al escribir mensajes, y en Tumblr (creo que utilizan TinyMCE como su editor)

.

Después de buscar mucho -. He estado triste por la mala calidad de la explicación de las soluciones disponibles por ahí

Esto es lo que he reunido:

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

Inspección del objeto de evento, parece que los datos sólo se incluye cuando hay un texto (en Chrome de todos modos).

Soy consciente de que IE tiene un objeto clipboardData que le da acceso a los contenidos del portapapeles.

También he oído de posibles soluciones utilizando Flash, applets de Java y HTML 5 lienzo -. Pero todavía no han sido capaces de encontrar buenos comentarios escritos que explican esas soluciones

Cualquier hecho esto con éxito, y pueden sugerir las mejores prácticas?

Answer 1

Se puede utilizar la API de portapapeles: http://dev.w3.org /2006/webapi/clipops/clipops.html

O se puede hacer es utilizar cero ClipBoard . Utiliza una película invisible Flash y proporciona una interfaz JavaScript para el acceso al portapapeles.

Answer 2

Esto funciona bien en Chrome. He aquí un ejemplo vivo de apoyo obtener datos de imagen en JavaScript puro sin servidores implicados: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/