在窗口之间拖放图像而不是链接-HTML5

Question

我正在尝试在HTML5中制作一个拖放式上传器，其附加要求是能够从我不拥有且无法编辑的其他网站（主要是图片）中拖动文件。

在这种情况下，在这种情况下，我没有使用URL ondrop从本地计算机下载图像e.dataTransfer.files并将其发布，而是使用URL检索URL e.dataTransfer.getData('URL')并将其发布到服务器以供其在服务器端下载。

除我拖动链接中包含的图像外，其他都可以。

当启动从<img>元素的拖动时，它起作用，但不<img>包含在<a>元素中。在后一个中，e.dataTransfer.getData('URL')给我href链接的，而不是src图像的。

我调查了e.dataTransfer.getData()一下它是否接受了其他有帮助的论点。另一个选择是“文本”，它产生的结果与“ URL”相同。

有没有一种获取图像URL的方法，或者我注定要失败，因为拖动链接中包含的图像时浏览器实际上并没有携带图像URL（即：我是拖动链接，而不是图像）？

更新

为了说明这一点，我在这里创建了一个jsfiddle：https ://jsfiddle.net/2m58rfou/
另一个有2张图片的图片在这里演示了我的问题：https ://jsfiddle.net/870asboa/
在单独的标签中打开它们并尝试拖动两个图片在放置区中。

在第一个图像中，我得到了想要的：https://www.gstatic.com/webp/gallery/1.sm.jpg
在第二个图像中，我得到了http://www.google.com/包含图像的链接，而不是图像地址。

在第二种情况下，有没有办法获取图像地址而不是ondrop侦听器中的链接，还是不可能？（请记住，图像可以在任何网站上，我无法捕获任何dragstart事件，基本上只能捕获一个事件drop）。

Answer 1

在dragover事件处理程序中，迭代event.dataTransfer.types

只读属性DataTransfer.types是在事件中设置的拖动数据格式（作为字符串）的数组dragstart。格式的顺序与拖动操作中包含的数据的顺序相同。

该数组包含三个types：

• text/plain
• text/uri-list
• text/html

text/html是被html拖动<img>元素的字符串。

"text/html"通过传递to来获取字符串.getData()，然后使用 提取字符串src或创建一个元素并将字符串附加到该元素，然后使用获取元素。htmlRegExphtmlsrc<img>.src

holder.ondrop = function (e) {
  e.preventDefault();       
  this.className = '';
  var img = e.dataTransfer.getData("text/html");
  var div = document.createElement("div");
  div.innerHTML = img;
  var src = div.firstChild.src;
  console.log(div.firstChild, src);
  results.innerText = src;
}

jsfiddle https://jsfiddle.net/2m58rfou/6/