Akceptuj przeciąganie i upuszczanie obrazu z innego okna przeglądarki

Question

W języku Javascript wiem, jak skonfigurować obiekt docelowy przeciągania, który akceptuje przesyłanie plików z komputera użytkownika. Jak mogę ustawić cel upuszczania, który akceptuje obrazy, które są przeciągane z innej strony internetowej? Wszystko, co muszę wiedzieć, to URL obrazu, który przeciągnęli.

Wiem, że jest to możliwe, ponieważ Dokumenty Google akceptują spadki obrazów z innych witryn. Masz pomysł, jak to robią?

Answer 1

Można zdefiniować strefę drop:

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

a następnie obsługiwać dragenter, dragexit, dragover i drop zdarzenia:

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

Jest wewnątrz procedury obsługi zdarzeń drop że jesteśmy odczytywanie danych obrazu z obiektu dataTransfer jako tekstu. Jeśli usunęliśmy obraz z innej strony, ten tekst będzie reprezentował adres URL obrazu.

A tutaj jest live demo.

---

UPDATE:

Wygląda istnieją różnice między Chrome na Windows i MacOS. Na Windows dataTransfer.getData('Text'); działa, ale nie na MacOS. dataTransfer.getData('URL'); powinien działać na obu.

Answer 2

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

Wydaje się działać w przeglądarkach Firefox, Safari i Chrome na komputerach Mac. Działa również w przeglądarkach Firefox, IE i Chrome w systemie Windows.

Updated fiddle

Answer 3

Niektóre przeglądarki użyciu text/plain niektóre użycie text/html, jak również

Kod ten powinien wyciągnąć każdy URL tekstu lub obrazu źródłowego na najnowszym Chrome, FF na Mac i PC.

Safari wydaje się nie podawać adresu URL, więc jeśli ktoś wie, jak go uzyskać, daj mi znać.

Nadal pracuję nad 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

Chociaż jesteś w stanie zaakceptować przeciągnij i upuść obrazu z innej strony, nie jesteś w stanie wykonywać żadnej przetwarzanie niego (np przekształcenie go na ciąg base64 przy użyciu płótna) (stan na 21 sierpnia 2014) ze względu na różne kwestie dotyczące polityki krzyżowej.

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

Nawet Google nie może obejść ten problem - jeśli używasz Gmaila, można przeciągnąć i upuścić obraz z innego miejsca w organizmie do e-mail, ale to wszystko nie jest stworzenie elementu <img/> z src zestawie do url (z powyższego kodu).

Jednak stworzyłem wtyczkę, która pozwala na fałszowanie jej między przecinkami, przeciągnij i upuść. Wymaga zaplecza PHP.

Przeczytaj artykuł, który napisałem na nim tutaj https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Answer 5

Oto moje rozwiązanie problemu: Dropzone js - Drag n Drop file from same page

Prosimy pamiętać, że zdolność, aby przeciągnąć obraz z inny domeny zależy od ich konfiguracji Cors .