Akzeptieren Sie Drag & Drop des Bildes aus einem anderen Browserfenster

Lesezeit: 6 Minuten

In Javascript weiß ich, wie man ein Drag & Drop-Ziel einrichtet, das Datei-Uploads vom Computer des Benutzers akzeptiert. Wie kann ich ein Ablageziel einrichten, das Bilder akzeptiert, die von einer anderen Website gezogen werden? Alles, was ich wissen muss, ist die URL des Bildes, das sie gezogen haben.

Ich weiß, dass dies möglich ist, da Google Docs Bildlöschungen von anderen Websites akzeptiert. Irgendeine Ahnung, wie sie das machen?

Akzeptieren Sie Drag Drop des Bildes aus einem anderen
Darin Dimitrow

AKTUALISIEREN:

Es sieht so aus, als ob es Unterschiede zwischen Chrome unter Windows und MacOS gibt. Unter Windows dataTransfer.getData('Text'); funktioniert aber nicht auf macOS. dataTransfer.getData('URL'); sollte bei beiden funktionieren.


ALTE Antwort:

Sie könnten eine Dropzone definieren:

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

und dann behandeln dragenter, dragexit, dragover und drop Veranstaltungen:

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 ist im Inneren drop Event-Handler, aus dem wir die Bilddaten lesen dataTransfer Objekt als Text. Wenn wir ein Bild von einer anderen Webseite gelöscht haben, repräsentiert dieser Text die URL des Bildes.

Und hier ist ein live demo.

  • Dies warnt eine leere Zeichenfolge in Chrome

    – Vorgehensweise

    15. August 2012 um 18:09 Uhr

  • @Duopixel, das ist sehr seltsam. Bei mir funktioniert es: Chrome 21.0, Windows 7 64 Bit. Welches Betriebssystem verwenden Sie? Funktioniert es mit FF?

    – Darin Dimitrow

    15. August 2012 um 18:10 Uhr


  • Sieht aus wie Chrome auf MacOS verwendet dataTransfer.getData('url');.

    – Darin Dimitrow

    20. August 2012 um 5:54 Uhr

  • getData('URL') funktioniert nicht, wenn das gezogene Bild ein Link ist, aber ich kann keinen anderen Weg finden, um die Informationen über das gezogene Objekt zu erhalten … es scheint, dass anstelle des Bildes das Objekt der Link ist, der dieses Bild enthält

    – haynar

    20. August 2012 um 6:49 Uhr

  • Es hat ein Problem mit lokalen Dateien, zweifellos aus Sicherheitsgründen. Die Datei muss entfernt sein, damit dies funktioniert.

    – djabraham

    5. Januar 2014 um 20:04 Uhr

1647139328 78 Akzeptieren Sie Drag Drop des Bildes aus einem anderen
zackdever

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

Scheint in Firefox, Safari und Chrome auf dem Mac zu funktionieren. Funktioniert auch in Firefox, IE und Chrome unter Windows.

Geige aktualisiert

  • Welche Version? Es funktioniert hier unter Windows 7, Chrome 21.0.1180.79

    – zackdever

    20. August 2012 um 6:11 Uhr

  • Dies funktioniert nicht, wenn das gezogene Bild ein Link ist, es warnt die Link-URL (auf Chrome/Mac) oder eine leere Zeichenfolge (auf Safari/Mac) anstelle der Bild-URL

    – haynar

    20. August 2012 um 6:40 Uhr


1647139328 646 Akzeptieren Sie Drag Drop des Bildes aus einem anderen
Lukas Madhanga

Obwohl Sie das Ziehen und Ablegen eines Bildes von einer anderen Website akzeptieren können, können Sie es nicht verarbeiten (z. B. es mithilfe der Leinwand in einen base64-String konvertieren) (Stand 21. August 2014) aufgrund verschiedener herkunftspolitische Fragen.

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

Sogar Google kommt nicht darum herum – Wenn Sie Google Mail verwenden, können Sie ein Bild von einer anderen Stelle in den E-Mail-Text ziehen und dort ablegen, aber dies erstellt lediglich eine <img/> Element mit seinen src einstellen url (aus dem Code oben).

Ich habe jedoch ein Plugin erstellt, mit dem Sie es per Drag & Drop ursprungsübergreifend fälschen können. Es erfordert ein PHP-Backend.

Lesen Sie hier den Artikel, den ich dazu geschrieben habe https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

  • Es scheint, dass nicht nur plattformübergreifende Probleme Sie daran hindern können, die URL abzurufen, sondern auch gemischte Inhalte.

    – Michael

    6. Februar 2016 um 19:15 Uhr

  • Diese verschachtelte Bedingung sieht nach etwas aus reduce würde gut tun.

    – Weltschmerz

    4. März um 1:11

Akzeptieren Sie Drag Drop des Bildes aus einem anderen
B. RT

Hier ist meine Lösung für das Problem: Dropzone js – Drag n Drop-Datei von derselben Seite

Bitte denken Sie daran, dass Sie ein Bild ziehen können Ein weiterer Domäne hängt von ihrer CORS-Einrichtung ab.

Einige Browser verwenden text/plain, andere verwenden auch text/html

Dieser Code sollte eine beliebige Text- oder Bildquellen-URL auf dem neuesten Chrome, FF auf Mac und PC abrufen.

Safari scheint die URL nicht zu geben, also wenn jemand weiß, wie man sie bekommt, lass es mich wissen.

Ich arbeite noch am 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);
    }
}

1647139329 493 Akzeptieren Sie Drag Drop des Bildes aus einem anderen
Hinweise

Wie die anderen Antworten richtig sagen: Es hängt normalerweise von den CORS-Einstellungen des Servers ab, ob Drag & Drop aus einem anderen Browserfenster möglich ist (Access-Control-Allow-Origin muss eingestellt werden).

Allerdings habe ich gerade zufällig herausgefunden, dass es möglich ist, beliebige Bilder aus einem Firefox (aktuelle Version 68.0.1) in ein Chrome-Fenster (aktuelle Version 76.0.3809) zu ziehen und in Javascript zu verarbeiten, unabhängig davon, ob CORS-Header vorhanden sind eingestellt oder nicht.

Sehen Arbeitsbeispiel (basierend auf jsfiddle von Darin Dimitrov), das Bilder akzeptiert und direkt anzeigt von:

  1. Drag and Drop vom lokalen Computer (z. B. aus dem Datei-Explorer)
  2. Drag & Drop von einer anderen Website, wenn CORS-Header gesetzt sind, z. B. ein Bild von https://imgur.com/
  3. Ziehen Sie beliebige Bilder aus dem Firefox-Fenster in das Chrome-Fenster und legen Sie sie dort ab:
    • Öffnen Sie die jsfiddle-Demo in Chrome
    • Öffnen Sie z. B. die Google-Bildsuche in Firefox und suchen Sie nach einem beliebigen Bild
    • Klicken Sie auf das Bild für eine größere Vorschau
    • Ziehen Sie das Vorschaubild per Drag & Drop auf die jsfiddle-Demo in Chrome

Dies scheint jedoch eine Art Bug von Firefox zu sein und daher würde ich mich in einer produktiven Anwendung nicht auf dieses Verhalten verlassen.

995730cookie-checkAkzeptieren Sie Drag & Drop des Bildes aus einem anderen Browserfenster

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy