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

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

我知道这是可能的，因为谷歌文档接受来自其他网站的图像丢弃。知道他们是怎么做到的吗？

更新：

看起来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 对象中的图像数据作为 Text 读取。如果我们从其他网页中删除图像，则此文本将表示图像的URL。

这是一个live demo.

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

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

更新的小提琴

尽管您可以接受从其他网站拖放图像，但由于各种跨源策略问题，您无法对其进行任何处理（例如，使用画布将其转换为 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;
             }
         }
     }

即使是谷歌也无法解决这个问题 - 如果你使用gmail，你可以将图像从另一个位置拖放到电子邮件正文中，但这一切所做的只是创建一个<img/>元素，其src设置为url（从上面的代码）。

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

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

这是我对这个问题的解决方案：拖放区 js - 从同一页面拖放文件

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

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

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

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

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

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

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

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

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

相关内容

最新更新

热门标签：