Javascript 将图像从浏览器拖动到桌面

Javascript 将图像从浏览器拖动到桌面,javascript,html,jquery,drag-and-drop,Javascript,Html,Jquery,Drag And Drop,我想将图像从浏览器拖到桌面 例如,我有一个带有src的图像是一个缩影(小图片),名称是大图像 当我将图像从浏览器拖动到桌面时,将拖动小图像而不是大图像 那么,我如何才能把大局拖下来呢?我如何通过jQuery或JS做到这一点 您可以通过使用一些复杂的代码来实现这一点,使用鼠标悬停和鼠标悬停 在鼠标上方 ,将原始高度和宽度设置为图像的样式(以保留图像高度) 然后将thmb url存储在数据属性中,并将图像的src替换为name属性中的hd url 在mouseout(鼠标离开图像)之后

我想将图像从浏览器拖到桌面

例如,我有一个带有src的图像是一个缩影(小图片),名称是大图像

当我将图像从浏览器拖动到桌面时,将拖动小图像而不是大图像

那么,我如何才能把大局拖下来呢?我如何通过jQuery或JS做到这一点


您可以通过使用一些复杂的代码来实现这一点,使用
鼠标悬停
鼠标悬停

鼠标上方

  • ,将原始高度和宽度设置为图像的样式(以保留图像高度)

  • 然后将thmb url存储在数据属性中,并将图像的
    src
    替换为
    name
    属性中的hd url

mouseout
(鼠标离开图像)
之后

  • 删除样式属性(无nedd高度和宽度)

  • 将原始url还原到image
    src
    属性

现在,如果选中拖放,它将存储hd图像,而不是thmbs图像::

请参见下面的工作代码段:

$(“#img”).mouseover(函数(e){
//将拇指url存储在数据属性中,以便在鼠标移出后获取它
$(this.data(“url”),$(this.attr(“src”);
//设置原始拇指的高度、宽度以获得使用体验
$(this.css)({
“宽度”:$(this).width(),
“高度”:$(this).height()
})
//将url src更改为高清图像
$(this.attr(“src”),$(this.attr(“name”);
});
$(“#img”).mouseout(函数(e){
//恢复原始拇指图像
$(this.attr(“src”),$(this.data(“url”);
//删除悬停时添加的样式
$(此).removeAttr(“样式”);
});


这很好,完美地回答了这个问题,效果也很好-但它回避了一个问题(对于OP):为什么要麻烦鼠标,只需将较大的图像留在页面中。@freedomn-m,你是对的,我应该让原始图像显示出来,但我不知道它是否能够在窗口中出现多个图像的情况下发挥一些性能,我必须先检查一下,谢谢你的留言啊是的,如果页面中有很多非常大的图片,可能会影响性能。miss@SoumayaMORABIT,它有用吗,或者你有其他问题吗?它工作得很好,非常感谢,但我还有一个问题:例如,我如何一次拖动多张图片?