Принять перетаскивание изображения из другого окна браузера

В Javascript я знаю, как настроить цель перетаскивания, которая принимает загрузки файлов с пользовательского компьютера. Как настроить целевой объект, который принимает изображения, которые перетаскиваются с другого веб-сайта? Все, что мне нужно знать, это URL-адрес изображения, которое они перетащили.

Я знаю, что это возможно, поскольку Google Docs принимает капли изображения с других сайтов. Любая идея, как они это делают?

Ответы

Ответ 1

Вы можете определить зону перетаскивания:

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

а затем обработать события dragenter, dragexit, dragover и 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);
}

Внутри обработчика событий drop мы считываем данные изображения из объекта dataTransfer в виде текста. Если мы сбросили изображение с какой-либо другой веб-страницы, этот текст будет представлять URL-адрес изображения.

И здесь live demo.

UPDATE:

Похоже, существуют различия между Chrome в Windows и MacOS. В Windows dataTransfer.getData('Text'); работает, но не на MacOS. dataTransfer.getData('URL'); должен работать на обоих.

Ответ 2

Хотя вы можете принять перетаскивание изображения с другого веб-сайта, вы не можете его обработать (например, преобразование его в строку base64 с использованием холста) (по состоянию на 21 августа 2014 года) из-за различные вопросы, связанные с перекрестным происхождением.

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

Даже Google не может обойти это. Если вы используете gmail, вы можете перетащить изображение из другого места в тело электронной почты, но все это создает элемент <img/> со своим набором src до url (из кода выше).

Однако, я создал плагин, который позволяет вам подделывать его перетаскивание с перекрестным началом. Для этого требуется PHP-сервер.

Прочитайте статью, которую я написал здесь https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Ответ 3

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

Кажется, работает в Firefox, Safari и Chrome на Mac. Также работает в Firefox, IE и Chrome в Windows.

Обновлена ​​скрипка

Ответ 4

В некоторых браузерах текстовый/обычный текст использует текст /html, а

Этот код должен вытащить любой URL-адрес источника текста или изображения на последних версиях Chrome, FF на Mac и ПК.

Safari, похоже, не дает URL-адрес, поэтому, если кто-то знает, как его получить, дайте мне знать.

Я все еще работаю над 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);
    }
}