HTML5在窗口之间拖放
是否有HTML5的拖放function或/和文件API拖动JPG图像从一个窗口到另一个？
这个想法是，我可以从Facebook拖动和图像到一个不同的浏览器的窗口与自定义HTML将获得该图像。
或者，至less，从桌面拖到浏览器的方式？
非常感谢
不确定窗口之间，但肯定从桌面：
http://studio.html5rocks.com/#Photos
其实，检查完整的html5rocks.com网站的想法。
编辑：
我只是在两个独立的浏览器窗口中打开这个演示 ，我可以从一个窗口拖到另一个窗口。 我也能够从Facebook上拖动缩略图并将其放入拖放区域。
然而，Facebook的形象被下降为“未知”。 所以看起来你可以从一个站点下降到另一个站点，但我不知道究竟是什么被丢弃。 如果您从Facebook或其他网站上拖拽，Facebook可能需要让图像或元素具有draggable属性设置或您的应用程序可以读取的其他内容。
底线是你应该能够在你有控制权的应用程序之间工作。 但是，如果您正在尝试将其与外部应用程序集成，则需要进行一些实验以确定在拖放过程中究竟发生了什么。 我自己并没有做这个工作，但是不应该很难。
如果你使用jQuery，你可以看看这个： https ： //github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page
在关于页面：
它通过发送带有图像URL的JSONP请求通过Google App Engine1发送到Google服务器。 然后，服务器将图像转换为base64编码的数据URL，并将图像作为JSON对象发回。 这意味着图像可以在本地包含在网站上，因此可以通过canvas标签进行编辑。
我还没有尝试过，但会尽快看看！
这是一个古老的，但是因为我最近和它一起，这个比你想象的更多，所以我给出了一个答案。作为一个介绍了解本地方法是指这个网站 。
那会让你如此遥远。 当在窗户间拖动时，事情变得很糟糕。 问题是再次，浏览器之间没有太多的一致性。 打开一堆不同的浏览器，然后打开这个优秀的例子 。 select第一个getData('Text')单选button并testing拖放图像。 你会注意到的第一件事是在某些情况下，getData（'Text'）包含一个url，但不包含图片url。 所以，现在getData(e.dataTransfer.types[0]) based on detected content type单选buttonselectgetData(e.dataTransfer.types[0]) based on detected content type 。 你会注意到取决于你select哪个浏览器，某些types包含了图像的url，但是每个浏览器都有不同的types。 在撰写本文时，一些浏览器（Internet Explorer）没有任何具有图像url的types。 这就是为什么如果您在Internet Explorer中打开Google图像并尝试使用拖放式图像search，则什么都不会发生 – 不会出现“drop here”框。
所以，我提出的最好的（确保你参考上面的那些链接，否则你将不知道我正在做什么）： –
- 检查
e.dataTransfer.files。 如果有文件，那么一切都很好。 这很可能是从本地计算机的下降。 如果不是，请转到步骤2。 -
通过
getData(e.dataTransfer.types[0])循环，并将url传递给正则expression式，该正则expression式检查包含图像url的string。 就像是：RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )如果你find一场比赛，那么一切都很好。 做任何你想要的，比如传递给服务器来检索图像。 如果不是，请转到步骤3。
- 尝试
getData('Text')。 如果你find一场比赛，那么很好。 传递到服务器等。如果不是，请转到步骤4。 - 你不走运。 向用户显示不支持的消息，并要求他们以另一种方式提供图像。
*从拖动的图像获取url，100％确定Firefox和Chrome *
$('#element').bind('drop', function (e) { alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src')); });
我知道你可以很容易地得到拖动图像的URL：myDataTransfer.getData（“Text”）
但到目前为止，我还没有能够find一种方式来检索底层的图像数据，而不会跨域javascript安全犯…你不能使用ajax获取图像，你不能使用canvas作为中介。
不幸的是，似乎在大多数情况下，拖拽本身（即dataTransfer对象）不包含图像数据。 我说“大多数情况下”，因为在同一个浏览器内拖动不，但是当我从一个Firefox窗口拖到一个Chrome窗口，似乎已经包含了某种位图图像，但它是在一个不寻常的格式Windows的东西）。
唯一要看的是浏览器特定的function，比如“application / x-moz-nativeimage”，但是在Chrome中我没有看到任何附加到dataTransfer对象的类似属性。
以下是使用HTML5进行文件拖放的示例。 这似乎不能从一个浏览器窗口工作到另一个（桌面 – >浏览器工程）。 但你可以用这个作为参考。
这是一个使用networkingID创buildHTML5表单的实验。
http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/
在Chrome中，您可以使用“复制/粘贴”，您需要通过右键单击并select“复制图像”复制图像，然后将其粘贴到另一个页面中，该页面使用Ctrl + V处理粘贴事件。
以下是演示原理的演示： http : //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
