将图像从浏览器拖到桌面

Question

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

例如，我有一张带有 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" >

你能帮帮我吗？

Answer 1

您可以通过使用一些棘手的代码来实现这一点，使用 mouseover 和 mouseout

上mouseover

，将原始高度和宽度设置为图像的样式（以保留原始图像的高度），
然后将thmb url存入data属性，并用name属性
中的hd url替换image的src ]

after mouseout (鼠标离开图片) ,

删除样式属性（没有 nedd 高度和宽度）
恢复缩略图原始url到图片src属性

现在，如果您选中 drag en drop ，它将存储高清图像而不是 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">

将图像从浏览器拖到桌面

Drag image from browser to Desktop

html

javascript

jquery

drag-and-drop