HTML5 在窗口之间拖放

Posted 2023-05-08

【中文标题】HTML5 在窗口之间拖放

【英文标题】：HTML5 drag and drop between windows

【发布时间】：2011-04-11 07:30:26

【问题描述】：

是否有 html5 拖放功能或/和文件 API 将 jpg 图像从一个窗口拖到另一个窗口？

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

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

非常感谢

【问题讨论】：

在做一些测试后刚刚在我的答案中添加了更多信息

【参考方案1】：

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

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

实际上，请查看完整的 html5rocks.com 网站以获取想法。

---

编辑：

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

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

底线是您应该能够使其在您可以控制的应用程序之间工作。但是，如果您尝试将其与外部应用程序集成，则需要进行一些实验以找出在拖放过程中究竟传递了什么。我自己没有做过这项工作，但应该不难。

【参考方案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）没有任何类型的图像 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 步。 你运气不好。向用户显示不受支持的消息，并要求他们以另一种方式提供图像。

【讨论】：

getData('URL') 总是给出 getData('Text') 在某些浏览器中的结果

很好的总结了如何处理问题。我想补充一点，正则表达式除了http之外，还应该考虑https，例如RegExp( '(http|https)://(.(?!(http|https)://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )

【参考方案3】：

如果你使用 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 对象发送回。这意味着图像可以本地包含在网站上，因此可以通过画布标签进行编辑。

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

【讨论】：

这可能有效，但由于浏览器的同源策略，它需要$.getImageData。 $.getImageData 使用img-to-json.appspot.com 来检索图像数据。目前该服务已超过配额且不接受请求。就像在September 2012 中一样。

【参考方案4】：

*从拖拽的图片中获取url，firefox和chrome 100%ok *

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

【讨论】：

这一行是什么？！我试图简化它：gist.github.com/qgustavor/a07fb552f8117607a56b27d00e7bb20c

【参考方案5】：

我知道你可以很容易地得到被拖拽的图片的 URL： myDataTransfer.getData("文本")

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

不幸的是，在大多数情况下，拖动本身（即 dataTransfer 对象）似乎不包含图像数据。我说“大多数情况”是因为从同一个浏览器中拖动不会，但是当我从 Firefox 窗口拖动到 Chrome 窗口时，它似乎包含了某种位图图像，但它采用了一些不寻常的格式（可能是Windows 的东西）。

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

【讨论】：

如果您只是想抓取图像，请创建一个 DOM 元素“”并将其设置为“SRC”属性。如果您将此图像插入您的页面，您的浏览器会为您获取它。 fckeditor 和其他所见即所得的表单编辑器今天基本上都在为你做这个。

是的，您可以使用我在答案第一行中提到的 URL 作为 img 中的 src。然后浏览器将向用户显示图像，但 javascript 将无法访问底层图像数据。

【参考方案6】：

这是一个使用 HTML5 拖放文件的示例。这似乎不适用于从一个浏览器窗口到另一个（桌面->浏览器工作）。但你可以以此作为参考。

这是一个使用 web id 创建 HTML5 表单的实验。

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

【参考方案7】：

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

这是一个演示原理的演示：http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/