是否有 HTML5 拖放功能或/和文件 API 将 jpg 图像从一个窗口拖到另一个窗口？
我的想法是，我可以将图像从 Facebook 拖放到另一个浏览器的窗口，并使用自定义 HTML 来获取该图像。
或者，至少是一种从桌面拖动到浏览器的方法？
非常感谢
【问题讨论】：
标签： windows image html drag-and-drop desktop
不确定窗口之间，但肯定来自桌面：
http://studio.html5rocks.com/#Photos
实际上，请查看完整的 html5rocks.com 网站以获取想法。
编辑：
我刚刚在两个单独的浏览器窗口中打开了this demo，我可以从一个窗口拖动到另一个窗口。我还能够从 Facebook 拖放缩略图并将其放入拖放区。
但是，Facebook 图片被删除为“未知”。所以看起来你可以从一个站点下降到另一个站点，但我不确定到底什么是下降的。如果您是从 Facebook 等拖动，Facebook 可能需要让图像或元素具有 draggable 属性集或您的应用程序可以读取的其他内容。
底线是您应该能够使其在您可以控制的应用程序之间工作。但是，如果您尝试将其与外部应用程序集成，则需要进行一些实验以找出在拖放过程中究竟传递了什么。我自己没有做过这项工作，但应该不难。
【讨论】：
这是一个古老的方法，但由于我最近与它发生了争执，而且它的内容比你想象的要多，所以我给出了一个答案。作为了解原生方法的介绍，请参阅 this site。
这会让你走这么远。在窗口之间拖动时，事情会变得很臭。问题是，浏览器之间再一次没有太多的一致性。打开一堆不同的浏览器，然后open this excellent example。选择第一个getData('Text') 单选按钮并测试拖放图像。您会注意到的第一件事是，在某些情况下 getData('Text') 包含一个 url，但不包含图像 url。所以，现在选择getData(e.dataTransfer.types[0]) based on detected content type 单选按钮。您会注意到，根据您选择的浏览器，某些类型包含图像的 url，但每个浏览器都有不同的类型。在撰写本文时，一些浏览器（Internet Explorer）没有任何类型的图像 url。这就是为什么如果您在 Internet Explorer 中打开 Google 图片并尝试使用时髦的拖放图片搜索，什么都没有发生 - 没有出现“拖放到这里”框。
所以，我想出的最好的方法是（确保您参考上面的链接，否则您将不知道我在说什么）：-
e.dataTransfer.files。如果有文件，那么一切都很好。这很可能是从本地计算机中删除的。如果没有，请转到第 2 步。循环通过getData(e.dataTransfer.types[0]) 并将url 传递给一个正则表达式，该表达式检查包含图像url 的字符串。类似的东西：
RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
如果您找到匹配项，那么一切都很好。做任何你想做的事，比如传递给服务器来检索图像。如果没有，请转到第 3 步。
getData('Text')。如果你找到一个匹配，那么很好。传递给服务器等。如果没有，请转到第 4 步。【讨论】：
RegExp( '(http|https)://(.(?!(http|https)://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
如果你使用 jQuery，你可以看看这个：https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page
关于页面：
它的工作原理是通过 Google App Engine1 向 Google 的服务器发送带有图像 URL 的 JSONP 请求。然后，服务器将图像转换为 base64 编码的数据 URL，并将图像作为 JSON 对象发送回。这意味着图像可以本地包含在网站上，因此可以通过画布标签进行编辑。
我还没有尝试过，但很快就会看看！
【讨论】：
*从拖拽的图片中获取url，firefox和chrome 100%ok *
$('#element').bind('drop', function (e) {
alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});
【讨论】：
我知道你可以很容易地得到被拖拽的图片的 URL： myDataTransfer.getData("文本")
但到目前为止，我还没有找到一种方法来检索底层图像数据而不会违反跨域 javascript 安全性......你不能使用 ajax 获取图像，你不能使用画布也可以作为中介。
不幸的是，在大多数情况下，拖动本身（即 dataTransfer 对象）似乎不包含图像数据。我说“大多数情况”是因为从同一个浏览器中拖动不会，但是当我从 Firefox 窗口拖动到 Chrome 窗口时，它似乎包含了某种位图图像，但它采用了一些不寻常的格式（可能是Windows 的东西）。
唯一需要注意的是特定于浏览器的功能，例如“application/x-moz-nativeimage”，但我没有看到 Chrome 中的 dataTransfer 对象附加了任何类似的属性。
【讨论】：
这是一个使用 HTML5 拖放文件的示例。这似乎不适用于从一个浏览器窗口到另一个（桌面->浏览器工作）。但你可以以此作为参考。
这是一个使用 web id 创建 HTML5 表单的实验。
http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/
【讨论】：
在 Chrome 中您可以使用复制/粘贴，您需要通过右键单击并选择“复制图像”来复制图像，然后您可以使用 Ctrl+V 将其粘贴到另一个处理粘贴事件的页面中。
这是一个演示原理的演示：http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
【讨论】：