soltar imagenes example ejemplos ejemplo drop bootstrap arrastrar and windows image html5 drag-and-drop desktop

windows - imagenes - Arrastrar y soltar HTML5 entre ventanas



drag and drop jquery ejemplos (7)

¿Hay alguna forma con la funcionalidad de arrastrar y colocar HTML5 y / o la API de archivo para arrastrar una imagen jpg de una ventana a otra?

La idea es que podría arrastrar e imagen de 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

* obteniendo la URL de la imagen arrastrada, 100% de acuerdo con Firefox y Chrome *

$(''#element'').bind(''drop'', function (e) { alert($($.trim($(e.originalEvent.dataTransfer.getData(''text/html'')).html())).attr(''src'')); });

Esta es una pregunta anterior, pero dado que hace poco me enfrenté a ella y hay más en esto de lo que podría pensar, puse una respuesta. Como introducción para aprender sobre los métodos nativos, consulte este sitio .

Eso te 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 diferentes navegadores y luego abre este excelente ejemplo . Seleccione el primer botón de radio 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 getData(e.dataTransfer.types[0]) based on detected content type botón de opción del 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, lo mejor que se me ocurre es (asegúrese de consultar los enlaces anteriores, de lo contrario no sabrá de qué estoy hablando):

  1. Compruebe e.dataTransfer.files . Si hay archivos, entonces todo está bien. Es muy probable que sea una caída de la computadora local. Si no, ve al paso 2.

  2. getData(e.dataTransfer.types[0]) por getData(e.dataTransfer.types[0]) y pasa la url a una expresión regular que busca una cadena que contenga la url de la imagen. Algo como:

    RegExp( ''http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)'', ''gmi'' )

    Si encuentras un partido, entonces todo bien. Haz lo que quieras, como pasar al servidor para recuperar la imagen. Si no, ve al paso 3.

  3. Pruebe getData(''Text'') . Si encuentras una coincidencia, entonces es bueno. Pase al servidor, etc. De lo contrario, vaya al paso 4.
  4. Estás fuera de suerte. Muestre al usuario un mensaje no admitido y solicite que proporcione la imagen de otra manera.

No estoy seguro sobre entre ventanas, pero ciertamente desde el escritorio:

http://studio.html5rocks.com/#Photos

En realidad, consulte el html5rocks.com completo de html5rocks.com para obtener ideas.

EDITAR:

Acabo de abrir esta demostración en dos ventanas de navegador separadas, y puedo arrastrar desde 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 descartó 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 o similar, Facebook puede necesitar que las imágenes o los elementos tengan el conjunto de propiedades draggable u otra cosa que su aplicación pueda leer.

La conclusión es que debería 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.

Sé que puede obtener fácilmente la URL de la imagen que se arrastró: myDataTransfer.getData ("Texto")

pero hasta ahora no he podido encontrar una manera de recuperar los datos de imagen subyacentes sin caer en la seguridad de JavaScript entre dominios ... no se puede obtener la imagen usando ajax, y no se puede usar un lienzo como un intermediario tampoco.

Desafortunadamente, parece que en la mayoría de los casos, el arrastre mismo (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 que hay que mirar 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 está utilizando jQuery, puede ver esto: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

En la página de alrededor:
Funciona enviando 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.

Todavía no lo he probado, ¡pero lo echaré un vistazo pronto!