Accetta il trascinamento dell'immagine da un'altra finestra del browser

Question

In Javascript, so come impostare una destinazione di trascinamento & che accetta i caricamenti di file dal computer dell'utente. Come posso impostare un obiettivo di rilascio che accetti le immagini trascinate da un altro sito Web? Tutto quello che devo sapere è l'URL dell'immagine che hanno trascinato.

So che questo è possibile, dal momento che Google Docs accetta gocce di immagini da altri siti web. Qualche idea su come lo stanno facendo?

Answer 1

Si potrebbe definire una zona di lancio:

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

e quindi gestire le dragenter, dragexit, dragover e drop eventi:

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); 
} 

E 'all'interno del gestore drop caso in cui siamo leggere i dati dell'immagine dall'oggetto dataTransfer come testo. Se abbiamo eliminato un'immagine da qualche altra pagina web, questo testo rappresenterà l'URL dell'immagine.

E questo è un live demo.

---

UPDATE:

Sembra che non ci sono differenze tra Chrome su Windows e MacOS. Su Windows dataTransfer.getData('Text'); funziona ma non su MacOS. dataTransfer.getData('URL'); dovrebbe funzionare su entrambi.

Answer 2

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

Sembra funzionare in Firefox, Safari e Chrome su Mac. Funziona anche con Firefox, IE e Chrome in Windows.

Updated fiddle

Answer 3

Alcuni browser utilizzano text/plain un certo uso text/html così

Questo codice dovrebbe tirare qualsiasi url testo o immagine fonte sulle ultime Chrome, FF su Mac e PC.

Safari non sembra fornire l'URL, quindi se qualcuno sa come farlo fammelo sapere.

Sto ancora lavorando su 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 4

Anche se si è in grado di accettare il drag and drop di un'immagine da un altro sito, non si riesce a fare qualsiasi trattamento di esso (ad esempio, la conversione in una stringa base64 utilizzando la tela) (a partire dal 21 agosto 2014) a causa di varie questioni relative alle politiche di origine incrociata.

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; 
      } 
     } 
    } 

Anche Google non può ottenere intorno a questo - Se utilizzi Gmail, è possibile trascinare e rilasciare un'immagine da un'altra posizione per il corpo e-mail, ma tutto questo non fa altro che creare un elemento <img/> con il suo set di src a url (dal codice sopra).

Tuttavia, ho creato un plug-in che consente di simulare il trascinamento della selezione incrociata. Richiede un backend PHP.

Leggi l'articolo che ho scritto su di esso qui https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Answer 5

Ecco la mia soluzione al problema: Dropzone js - Drag n Drop file from same page

Si prega di tenere presente che la capacità di trascinare un'immagine da un altro dominio dipende dalla loro configurazione CORS .