接受从另一个浏览器窗口拖放图像

Question

在 Javascript 中，我知道如何设置一个拖放目标，以接受从用户计算机上传的文件。如何设置接受从另一个网站拖动的图像的放置目标？我只需要知道他们拖动的图片的 URL。

我知道这是可能的，因为 Google Docs 接受来自其他网站的图片。知道他们是怎么做的吗？

Answer 1

更新：

Windows 和 MacOS 上的 Chrome 似乎存在差异。在 Windows dataTransfer.getData('Text'); 上有效，但在 MacOS 上无效。 dataTransfer.getData('URL'); 应该对两者都有效。

---

旧答案：

你可以定义一个拖放区：

<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。

Answer 2

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

似乎可以在 Mac 上的 Firefox、Safari 和 Chrome 中使用。也适用于 Windows 的 Firefox、IE 和 Chrome。

Updated fiddle

Answer 3

虽然您可以接受从其他网站拖放图像，但您无法对其进行任何处理（例如，使用画布将其转换为 base64 字符串）（截至 2014 年 8 月 21 日），因为各种跨域政策问题。

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，您可以将图像从另一个位置拖放到电子邮件正文中，但这所做的只是创建一个带有 src 集的 <img/> 元素到url（来自上面的代码）。

但是，我创建了一个插件，允许您伪造它的跨域拖放。它需要一个 PHP 后端。

阅读我在这里写的文章https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Answer 4

这是我对问题的解决方案：Dropzone js - Drag n Drop file from same page

请记住，从另一个域中拖动图像的能力取决于他们的 CORS 设置。

Answer 5

有些浏览器使用 text/plain 有些也使用 text/html

此代码应在最新的 Chrome、Mac 和 PC 上的 FF 上提取任何文本或图像源 URL。

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

Answer 6

正如其他答案正确指出的那样：如果可以从另一个浏览器窗口拖放，通常取决于服务器的 CORS 设置（必须设置Access-Control-Allow-Origin）。

但是我偶然发现可以将任何图像从 Firefox（当前版本 68.0.1）拖放到 Chrome 窗口（当前版本 76.0.3809）并在 Javascript 中处理它，无论是否是否设置了 CORS 标头。

参见working example（基于 Darin Dimitrov 的 jsfiddle），它接受并直接显示来自以下位置的图像：

1. 从本地计算机拖放（例如从文件资源管理器）
2. 如果设置了 CORS 标头，则从其他网站拖放，例如来自https://imgur.com/ 的图片
3. 将任何图像从 Firefox 窗口拖放到 Chrome 窗口：
   • 在 Chrome 中打开 jsfiddle 演示
   • 打开例如在 Firefox 中进行谷歌图片搜索并搜索任何图片
   • 点击图片放大预览
   • 将预览图像拖放到 Chrome 中的 jsfiddle 演示中

但这似乎是 Firefox 的一个错误，因此我不会在生产应用程序中依赖这种行为。