javascript 接受从另一个浏览器窗口拖放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11972963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accept drag & drop of image from another browser window
提问by Ben Dilts
In Javascript, I know how to set up a drag & drop target that accepts file uploads from the user's computer. How can I set up a drop target that accepts images that are dragged from another website? All I need to know is the URL of the image that they've dragged.
在 Javascript 中，我知道如何设置接受来自用户计算机的文件上传的拖放目标。如何设置接受从另一个网站拖动的图像的放置目标？我只需要知道他们拖动的图像的 URL。
I know this is possible, since Google Docs accepts image drops from other websites. Any idea how they're doing it?
我知道这是可能的，因为 Google Docs 接受来自其他网站的图片删除。知道他们是怎么做的吗？
回答by Darin Dimitrov
You could define a drop zone:
你可以定义一个拖放区：
<div id="dropbox">DropZone => you could drop any image from any page here</div>
and then handle the dragenter, dragexit, dragoverand dropevents:
然后处理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);
}
?
It is inside the dropevent handler that we are reading the image data from the dataTransferobject as Text. If we dropped an image from some other webpage this text will represent the url of the image.
? 在drop事件处理程序中，我们从dataTransfer对象中读取图像数据作为文本。如果我们从其他网页中删除图像，则此文本将代表图像的 url。
And here's a live demo.
这是一个live demo.
UPDATE:
更新：
It looks like there are differences between Chrome on Windows and MacOS. On Windows dataTransfer.getData('Text');works but not on MacOS. dataTransfer.getData('URL');should work on both.
看起来 Windows 和 MacOS 上的 Chrome 之间存在差异。在 Windows 上dataTransfer.getData('Text');有效，但在 MacOS 上无效。dataTransfer.getData('URL');应该对两者都有效。
回答by Luke Madhanga
Although you are able to accept the drag and drop of an image from another website, you are unable to do any processing of it (e.g. converting it to a base64 string using the canvas) (as of 21st August 2014) because of various cross-origin policy issues.
尽管您可以接受从其他网站拖放图像，但您无法对其进行任何处理（例如使用画布将其转换为 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;
}
}
}
Even Google can't get around this - If you use gmail, you can drag and drop an image from another location in to the email body, but all this does is create an <img/>element with its srcset to url(from the code above).
甚至 Google 也无法解决这个问题 - 如果您使用 gmail，您可以将图像从另一个位置拖放到电子邮件正文中，但这只是创建一个<img/>元素并将其src设置为url（来自上面的代码）。
However, I've created a plugin that allows you to fake it cross-origin drag and drop. It requires a PHP backend.
但是，我创建了一个插件，允许您伪造跨源拖放。它需要一个 PHP 后端。
Read the article I wrote on it here https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop
阅读我在这里写的文章https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop
回答by zackdever
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var imageUrl = evt.dataTransfer.getData('URL'); // instead of 'Text'
alert(imageUrl);
}
Seems to work in Firefox, Safari, and Chrome on Mac. Also works in Firefox, IE, and Chrome in Windows.
似乎适用于 Mac 上的 Firefox、Safari 和 Chrome。也适用于 Windows 中的 Firefox、IE 和 Chrome。
回答by DanJGer
Some browsers use text/plain some use text/html as well
有些浏览器使用 text/plain 有些也使用 text/html
This code should pull any text or image source url on the latest Chrome, FF on Mac and PC.
此代码应在最新的 Chrome、Mac 和 PC 上的 FF 上提取任何文本或图像源 url。
Safari doesn't seem to give the URL so if someone knows how to get it let me know.
Safari 似乎没有提供 URL，所以如果有人知道如何获取它，请告诉我。
I'm still working on IE.
我还在研究 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);
}
}
回答by B Λ R T
Here's my solution to the problem: Dropzone js - Drag n Drop file from same page
这是我对问题的解决方案：Dropzone js - Drag n Drop file from the same page
Please do keep in mind that ability to drag an image from anotherdomain depends on their CORS setup.
请记住，从另一个域拖动图像的能力取决于他们的 CORS 设置。
回答by klues
As the other answers correctly state: It normally depends on the CORS-Settings of the server if drag & drop from another browser window is possible (Access-Control-Allow-Originhas to be set).
正如其他答案正确指出的那样：如果可以从另一个浏览器窗口拖放（Access-Control-Allow-Origin必须设置），它通常取决于服务器的 CORS 设置。
However I've just found out by chance that it's possible to drap & drop any images from a Firefox (current version 68.0.1) to a Chrome window (current version 76.0.3809) and process it in Javascript, regardless if CORS headers are set or not.
但是，我偶然发现可以将任何图像从 Firefox（当前版本 68.0.1）拖放到 Chrome 窗口（当前版本 76.0.3809）并在 Javascript 中处理它，无论 CORS 标头是否为设置与否。
See working example(based on jsfiddle of Darin Dimitrov) which accepts and directly shows images from:
请参阅工作示例（基于 Darin Dimitrov 的 jsfiddle），它接受并直接显示来自以下内容的图像：
- drag and drop from local computer (e.g. from file explorer)
- drag and drop from other website, if CORS headers are set, e.g. an image from https://imgur.com/
- drag and drop any images from Firefox window to Chrome window:
- open jsfiddle demo in Chrome
- open e.g. google image search in Firefox and search for any image
- click on the image for bigger preview
- drag & drop the preview image to the jsfiddle demo in Chrome
- 从本地计算机拖放（例如从文件资源管理器）
- 如果设置了 CORS 标头，则从其他网站拖放，例如来自https://imgur.com/的图像
- 将任何图像从 Firefox 窗口拖放到 Chrome 窗口：
- 在 Chrome 中打开 jsfiddle 演示
- 在 Firefox 中打开例如谷歌图片搜索并搜索任何图片
- 单击图像以获得更大的预览
- 将预览图像拖放到 Chrome 中的 jsfiddle 演示中
However this seems to be kind of a bug of Firefox and therefore I would not rely on this behaviour in an productive application.
然而，这似乎是 Firefox 的一个错误，因此我不会在生产应用程序中依赖这种行为。
