如何使用 HTML5 拖放在线图像？

Question

我目前正在测试拖放。从我的桌面拖放图像可以正常工作，但我遇到了一个问题：当我拖放“在线”图像（从另一个网站，甚至使用 a 从同一网页拖放时，变量 e.dataTransfer.files 为空.

总结一下我正在尝试做的事情：您将图像从桌面拖到我的页面（在特殊区域内），然后它将图像显示在 <canvas> 内。我还希望能够从我的页面中拖动一张图片，比如说“嘿，你可以先试试这些图片！”。

关于拖放的基础知识，我从这个教程中得到了灵感：http://www.html5rocks.com/en/tutorials/dnd/basics/

Answer 1

因为在线拖放被解释为链接，而不是文件传输。您必须首先将图片保存在桌面上，然后它将被解释为真正的拖放。 但是，由于您的页面上已经有图片，您可以通过用现有图片填充画布（例如使用 javascript）来实现您的目标。