Question

无论如何都有HTML5 Drag＆amp;删除功能或/和File API将jpg图像从一个窗口拖到另一个窗口？

我的想法是，我可以将Facebook从Facebook拖动到另一个浏览器的窗口，并使用可以获取该图像的自定义HTML。

或者至少是一种从桌面拖到浏览器的方法吗？

非常感谢

Answer 1

不确定Windows之间，但肯定来自桌面：

http://studio.html5rocks.com/#Photos

实际上，请查看完整的html5rocks.com网站了解相关信息。

编辑：

我刚刚在两个单独的浏览器窗口中打开this demo，我可以从一个窗口拖动到另一个窗口。我还能够从Facebook拖动缩略图并将其放入放置区。

然而，Facebook图像被删除为“未知”。所以看起来你可以从一个站点掉到另一个站点，但我不确定到底究竟是什么。如果您从Facebook等拖动，Facebook可能需要让图像或元素具有draggable属性集或您的应用程序可以读取的其他内容。

最重要的是，您应该能够在您可以控制的应用程序之间工作。但是，如果您尝试将其与外部应用程序集成，则需要进行一些实验以找出在拖放过程中确切传递的内容。我自己没有完成这项工作，但这应该不难。

Answer 2

这是一个旧版本，但由于我最近与它争吵，并且除此之外还有更多内容，我给出了答案。作为了解本机方法的介绍，请参阅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）没有任何具有图片网址的类型。这就是为什么如果你在Internet Explorer中打开谷歌图像并尝试那种时髦的拖放图像搜索，没有任何反应 - 没有“放在这里”框。

所以，我提出的最好的是（确保你参考上面的那些链接，否则你将不知道我将要发生什么）： -

检查e.dataTransfer.files。如果有文件那么一切都很好。这很可能是本地计算机的丢失。如果没有，请转到步骤2.
循环遍历getData(e.dataTransfer.types[0])并将网址传递给正则表达式，该正则表达式检查包含图片网址的字符串。类似的东西：
```
RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
```
如果你找到匹配，那么一切都很好。做任何你想做的事情，比如传递到服务器来检索图像。如果没有，请转到步骤3.
试试getData('Text')。如果你找到匹配那么好。传递到服务器等。如果没有，请转到步骤4.
你运气不好。向用户显示不支持的消息，并要求他们以另一种方式提供图像。

Answer 3

如果你正在使用jQuery，你可以看一下：https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

在关于页面：
它的工作原理是通过Google App Engine1向Google的服务器发送带有图像网址的JSONP请求。然后，服务器将图像转换为base64编码数据URL，并将图像作为JSON对象发回。这意味着图像可以在本地包含在网站上，因此可以通过canvas标签进行编辑。

我还没有尝试过，但很快就会看一眼！

Answer 4

*从拖动的图片中获取网址，100％确定为firefox和chrome *

$('#element').bind('drop', function (e) {
    alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});

Answer 5

我知道您可以轻松获取被拖动图片的网址： myDataTransfer.getData（ “文本”）

但到目前为止，我还没有找到一种方法来检索底层图像数据而不会违反跨域javascript安全性...你无法使用ajax获取图像，而你无法使用画布作为中间人。

不幸的是，似乎在大多数情况下，拖拽本身（即dataTransfer对象）不包含图像数据。我说“大多数情况”是因为来自同一浏览器的拖动没有，但是当我从Firefox窗口拖到Chrome窗口时，它似乎包含了某种位图图像，但它有一些不寻常的格式（也许是Windows的事情）。

唯一要注意的是浏览器特定的功能，例如“application / x-moz-nativeimage”，但我没有看到Chrome中的dataTransfer对象附加任何类似的属性。

Answer 6

以下是使用HTML5进行文件拖放的示例。这似乎不适用于从一个浏览器窗口到另一个浏览器窗口（Desktop-＆gt;浏览器工作）。但您可以将此作为参考。

这是一个使用网络ID创建HTML5表单的实验。

http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/

Answer 7

在Chrome中，您可以使用复制/粘贴，您需要通过右键单击并选择“复制图像”来复制图像，然后您可以将其粘贴到另一个使用Ctrl + V处理粘贴事件的页面中。

以下是演示原则的演示：http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

HTML5在窗口之间拖放

7 个答案: