Javascript 拖放图片上载拖放URL（不是文件）

我希望实现以下目标：

假设有两个打开的浏览器窗口，一个（a）有一个用于放置图片文件的网站，另一个（b）有一些图片

我希望能够将图片从（b）拖放到（a）的拖放区域，并且（a）应该下载并存储图片（无需我先将图片从（b）下载到我的计算机，然后将文件拖放到（a）的拖放区域）

---

我甚至不知道如何在JS中启动此操作。有什么建议吗？

这是一个多步骤操作，可以通过多种不同的方式完成。 下面是一个基本解决方案的概要（使用jQuery）

防止浏览器默认行为

许多浏览器会自动将当前窗口/选项卡的url替换为您正在拖动的内容的url，从而刷新页面。这不是您想要的行为，因此第一步是停止这些事件

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

获取图像的URL

创建一个不带

src

和dropzone区域的

img

，并开始监听dropzone上的

drop

事件。在此处放置图像时，使用

DataTransfer

检索其URL（阅读有关DataTransfer的更多信息）。将空的

img

的

src

设置为刚检索到的URL

$('#dropzone').on('drop', function(e) {
    var url = e.originalEvent.dataTransfer.getData('url');
    $('#result').attr("src",url);
});

保存图像

通过Javascript将图像自动保存到您的计算机是一个棘手的问题，但幸运的是，人们已经创建了各种解决方案。我建议实施或类似的方法。但是，要使用FileSaver.js保存图像，您需要先将

img

转换为blob或canvas对象，然后再使用我能读懂

示例（不保存）

window.addEventListener（“dragover”，函数（e）{
e=e | |事件；
e、 预防默认值（）；
}，假）；
window.addEventListener（“drop”，函数（e）{
e=e | |事件；
e、 预防默认值（）；
}，假）；
$（“#dropzone”）
.on（'drop'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
var url=e.originalEvent.dataTransfer.getData（'url'）；
$（'#result'）.attr（“src”，url）；
})；

#dropzone{
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
}
#结果{
利润率：10px；
最大宽度：100px；
}

到这里来

您必须从第一个浏览器复制url（使用一些元数据来标识剪贴板内容的来源），然后将其粘贴到第二个浏览器。这可能有助于使用Javascript进行复制/粘贴：（您需要将其与拖放API混合使用）非常感谢您的回答。这给了我很多实现这一目标的灵感！@ArminHierstetter欢迎您！如果这回答了您的问题，您可以使用投票箭头下方的复选标记将其标记为“已接受”。