将图像从浏览器拖到桌面

debugcn 发表于 Dev

我们是

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

例如，我有一个带有src的图像是一个缩影（小图片），而名称是大图像。

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

那么，我该如何拖动全局呢？如何通过jQuery或JS做到这一点？

<img src="http://2.bp.blogspot.com/-iUJHpIju24o/UlQA-x8J7qI/AAAAAAAANVI/clUJZjFsm18/s640/plant_1280.jpg" name= "https://live.staticflickr.com/6120/6246147468_e5190345a5_h.jpg" >

你能帮我吗？

春天

您可以通过使用一些棘手的代码，使用mouseover和mouseout

在 mouseover

，将原始高度和权重设置为图像的样式（以保留thum图像hiwitt witdh），
然后将thmb url存储在data属性中，并将src图像替换为hd url inname属性

之后mouseout（鼠标离开图像），

删除样式属性（没有nedd height和width）
将Thumb原始URL还原到imagesrc属性

现在，如果选中drag en drop，它将存储hd图像而不是thmbs图像::

参见下面的工作片段：

$("#img").mouseover(function(e) {

  // store thumb url in data attribute in order to get it after mouseout
  $(this).data("url", $(this).attr("src"));
  

  // set height , width of orignal thumb for use experience 
  $(this).css({
    "width": $(this).width(),
    "height": $(this).height()
  })
  
  // change url src to hd image
  $(this).attr("src", $(this).attr("name"));

});

$("#img").mouseout(function(e) {
  // restore original thumb image
  $(this).attr("src", $(this).data("url"));

  // remove style added on hover 
  $(this).removeAttr("style");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img" src="http://2.bp.blogspot.com/-iUJHpIju24o/UlQA-x8J7qI/AAAAAAAANVI/clUJZjFsm18/s640/plant_1280.jpg" name="https://live.staticflickr.com/6120/6246147468_e5190345a5_h.jpg">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。