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中打开Goog​​le图像并尝试使用拖放式图像search,则什么都不会发生 – 不会出现“drop here”框。

所以,我提出的最好的(确保你参考上面的那些链接,否则你将不知道我正在做什么): –

  1. 检查e.dataTransfer.files 。 如果有文件,那么一切都很好。 这很可能是从本地计算机的下降。 如果不是,请转到步骤2。
  2. 通过getData(e.dataTransfer.types[0])循环,并将url传递给正则expression式,该正则expression式检查包含图像url的string。 就像是:

     RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' ) 

    如果你find一场比赛,那么一切都很好。 做任何你想要的,比如传递给服务器来检索图像。 如果不是,请转到步骤3。

  3. 尝试getData('Text') 。 如果你find一场比赛,那么很好。 传递到服务器等。如果不是,请转到步骤4。
  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/