hay de todos modos con la funcionalidad de soltar HTML5 & y/y la API de archivo para arrastrar una imagen jpg de una ventana a otra?HTML5 arrastrar y soltar entre ventanas
La idea es que podría arrastrar e imagen desde Facebook a una ventana de navegador diferente con un HTML personalizado que obtendría esa imagen.
¿O, al menos, una forma de arrastrar desde el Escritorio a un navegador?
Muchas gracias
No está seguro acerca de una ventana, pero sin duda desde el escritorio:
http://studio.html5rocks.com/#Photos
En realidad, disfrutar de los html5rocks.com sitio lleno de ideas.
EDIT:
que acaba de abrir this demo en dos ventanas separadas, y que puede arrastrar de una ventana a la otra. También pude arrastrar una miniatura desde Facebook y colocarla en una zona de colocación.
Sin embargo, la imagen de Facebook se eliminó como "desconocida". Parece que puedes pasar de un sitio a otro, pero no estoy seguro de qué es lo que realmente se descarta. Si está arrastrando desde Facebook u otros, Facebook puede necesitar que las imágenes o elementos tengan el conjunto de propiedades draggable o alguna otra cosa que su aplicación pueda leer.
En pocas palabras, debe poder hacer que funcione entre las aplicaciones sobre las que tiene control. Pero si intentas integrarlo con aplicaciones externas, necesitarás experimentar para saber qué pasa exactamente durante la función de arrastrar/soltar. No he hecho este trabajo yo mismo, pero no debería ser difícil.
Aquí hay un ejemplo del archivo de arrastrar y soltar usando HTML5. Esto no parece funcionar desde una ventana de navegador a otra (Desktop-> browser funciona). Pero puedes usar esto como referencia.
esto es un experimento que usa la identificación web para crear un formulario HTML5.
http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/
Sé que usted puede fácilmente obtener la URL de la imagen que fue arrastrado: myDataTransfer.getData ("texto")
pero hasta ahora no he podido encontrar una forma de recuperar los datos de imagen subyacentes sin fallar en la seguridad javascript entre dominios ... no se puede obtener la imagen usando ajax, y tampoco se puede usar un lienzo como intermediario.
Desafortunadamente, parece que en la mayoría de los casos, el arrastre en sí (es decir, el objeto dataTransfer) no contiene los datos de la imagen. Digo "la mayoría de los casos" porque los arrastres desde el mismo navegador no lo hacen, pero cuando arrastré desde una ventana de Firefox a una ventana de Chrome, parece haber incluido algún tipo de imagen de mapa de bits, pero está en algún formato inusual (tal vez Lo de Windows).
La única otra cosa a tener en cuenta es la funcionalidad específica del navegador, como "application/x-moz-nativeimage", pero no veo ninguna propiedad similar adjunta al objeto dataTransfer en Chrome.
Si solo intenta grapar la imagen, cree un elemento DOM "" y configure su atributo "SRC". Si inserta esta imagen en su página, su navegador la buscará por usted. El fckeditor y otros editores de formularios wysiwyg básicamente están haciendo esto por ti hoy. –
ericslaw
Sí, puede usar la URL que mencioné en la primera línea de mi respuesta como el src en un img. El navegador mostrará la imagen al usuario, pero javascript no tendrá acceso a los datos de imagen subyacentes. – dlo
En Chrome puedes usar Copiar/Pegar, tendrás que copiar la imagen haciendo clic derecho y eligiendo "Copiar imagen", luego puedes pegarla en otra página que maneja pegar eventos con Ctrl + V.
Aquí es una demostración que ilustra el principio: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
Si estás usando jQuery que podría echar un vistazo a esto: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page
En la página sobre:
Funciona mediante el envío de una solicitud JSONP con la URL de la imagen a los servidores de Google a través de Google App Engine1. El servidor luego convierte la imagen en URL de datos codificados en base64 y envía la imagen de regreso como un objeto JSON. Esto significa que la imagen puede incluirse localmente en el sitio web y, por lo tanto, puede editarse mediante la etiqueta canvas.
No lo he probado todavía, pero lo estaremos viendo pronto!
Esto podría funcionar, pero requiere [$ .getImageData] (http://www.maxnov.com/getimagedata/) debido a las mismas políticas de origen de los navegadores. $ .getImageData utiliza http://img-to-json.appspot.com para recuperar los datos de la imagen. Actualmente ese servicio supera la cuota y no acepta solicitudes. Como estaba en [septiembre de 2012] (http://stackoverflow.com/questions/12238581/getimagedata-not-working-because-img-to-json-is-down). –
Esta es una versión anterior, pero dado que hace poco me enfrenté a ella y hay más de lo que podría pensar, puse una respuesta. Como introducción para aprender sobre los métodos nativos, consulte this site.
Eso lo llevará tan lejos. Cuando se trata de arrastrar entre ventanas, las cosas huelen mal. El problema es que una vez más, no hay mucha coherencia entre los navegadores. Abre un grupo de navegadores diferentes y luego open this excellent example. Seleccione el primer botón de opción getData('Text') y pruebe arrastrando y soltando imágenes. Lo primero que notará es que en algunos casos getData ('Texto') contiene una url, pero no la url de la imagen. Por lo tanto, ahora elija el botón de opción getData(e.dataTransfer.types[0]) based on detected content type. Observará que dependiendo del navegador que elija, algunos tipos contienen la URL de la imagen, pero cada navegador tiene diferentes tipos. En el momento de escribir esto, algunos navegadores (Internet Explorer) no tienen ningún tipo que tenga la url de la imagen. Esta es la razón por la que si abres las imágenes de Google en Internet Explorer y pruebas la búsqueda de imágenes funky arrastrando y soltando, no pasa nada, no aparece el cuadro de "soltar aquí".
Por lo tanto, el mejor que he llegado con es (asegúrese de que usted se refiere a los enlaces anteriores lo contrario no sé lo que voy de alrededor): -
e.dataTransfer.files. Si hay archivos, entonces todo está bien. Es muy probable que sea una caída de la computadora local. De lo contrario, vaya al paso 2.Realice un bucle a través de getData(e.dataTransfer.types[0]) y pase la url a una expresión regular que compruebe si hay una cadena que contenga la url de la imagen. Algo como:
RegExp('http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi')
Si encuentra una coincidencia, entonces todo bien. Haz lo que quieras, como pasar al servidor para recuperar la imagen. De lo contrario, vaya al paso 3.
getData('Text'). Si encuentras una coincidencia, entonces es bueno. Pase al servidor, etc. De lo contrario, vaya al paso 4.getData ('URL') siempre da el resultado donde getData ('Texto') lo hace en algunos navegadores – adnan
* conseguir la url de la imagen arrastrada, 100% bien para Firefox y Chrome *
$('#element').bind('drop', function (e) {
alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});
¿Qué es esta línea ?! Intenté simplificarlo: https://gist.github.com/qgustavor/a07fb552f8117607a56b27d00e7bb20c –
acaba de agregar más información a mi respuesta después de hacer algunas pruebas de – Tauren