javascript - objetos - Acepta arrastrar y soltar la imagen desde otra ventana del navegador

mover imagen con el mouse javascript

Question

En Javascript, sé cómo configurar un destino de arrastrar y soltar que acepte cargas de archivos desde la computadora del usuario. ¿Cómo puedo configurar un destino de colocación que acepte imágenes que se arrastran desde otro sitio web? Todo lo que necesito saber es la URL de la imagen que han arrastrado.

Sé que esto es posible, ya que Google Docs acepta descargas de imágenes de otros sitios web. ¿Alguna idea de cómo lo están haciendo?

Answer 1

Algunos navegadores usan text / plain, otros usan text / html también

Este código debe extraer cualquier URL de fuente de texto o imagen en el último Chrome, FF en Mac y PC.

Safari no parece dar la URL, por lo que si alguien sabe cómo obtenerla, hágamelo saber.

Todavía estoy trabajando en IE.

function getAnyText(theevent) {
//see if we have anything in the text or img src tag
var insert_text;
var location = theevent.target;
var etext;
var ehtml;
try {
etext = theevent.dataTransfer.getData("text/plain");
} catch (_error) {}
try {
ehtml = theevent.dataTransfer.getData("text/html");
} catch (_error) {}
if (etext) {
insert_text = etext;
} else if (ehtml) {
object = $(''<div/>'').html(ehtml).contents();
if (object) {
insert_text = object.closest(''img'').prop(''src'');
}
}
if (insert_text) {
insertText(insert_text,location);
}
}

Answer 2

Aquí está mi solución al problema: Dropzone js - Arrastrar y soltar archivo de la misma página

Tenga en cuenta que la capacidad de arrastrar una imagen desde otro dominio depende de su configuración de CORS.

Answer 3

Aunque puede aceptar el arrastrar y soltar una imagen de otro sitio web, no puede realizar ningún procesamiento (p. Ej., Convertirla en una cadena base64 usando el lienzo) (a partir del 21 de agosto de 2014) debido a varios cruces Cuestiones de política de origen.

var dt = event.dataTransfer;
var url = dt.getData(''url'');
if (!url) {
url = dt.getData(''text/plain'');
if (!url) {
url = dt.getData(''text/uri-list'');
if (!url) {
// We have tried all that we can to get this url but we can''t. Abort mission
return;
}
}
}

Incluso Google no puede evitar esto: si usa gmail, puede arrastrar y soltar una imagen desde otra ubicación en el cuerpo del correo electrónico, pero todo esto es crear un elemento <img/> con su src configurado en url (desde el código de arriba).

Sin embargo, he creado un complemento que te permite falsificar el arrastrar y soltar de origen cruzado. Requiere un backend PHP.

Lee el artículo que escribí aquí https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Answer 4

Podrías definir una zona de caída:

<div id="dropbox">DropZone => you could drop any image from any page here</div>

y luego manejar los dragenter , dragexit , dragover y drop :

var dropbox = document.getElementById(''dropbox'');
dropbox.addEventListener(''dragenter'', noopHandler, false);
dropbox.addEventListener(''dragexit'', noopHandler, false);
dropbox.addEventListener(''dragover'', noopHandler, false);
dropbox.addEventListener(''drop'', drop, false);
function noopHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var imageUrl = evt.dataTransfer.getData(''Text'');
alert(imageUrl);
}

Es dentro del controlador de eventos de drop que estamos leyendo los datos de imagen del objeto dataTransfer como texto. Si soltamos una imagen de otra página web, este texto representará la url de la imagen.

Y aquí hay una live demo .

ACTUALIZAR:

Parece que hay diferencias entre Chrome en Windows y MacOS. En Windows dataTransfer.getData(''Text''); Funciona pero no en MacOS. dataTransfer.getData(''URL''); Debería trabajar en ambos.

Answer 5

function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var imageUrl = evt.dataTransfer.getData(''URL''); // instead of ''Text''
alert(imageUrl);
}

Parece funcionar en Firefox, Safari y Chrome en Mac. También funciona en Firefox, IE y Chrome en Windows.

Violín actualizado