【JS】jQuery实现网页下载图片功能

字数统计: 201阅读时长: 1 min

 2020/07/28   Share

前几天在做仿天官赐福漫画官网的网页的时候有一个功能是保存图片，之前自己没有写过这个功能，所以尝试了一下。

参考

jquery下载图片

解决方案

HTML代码

1 2	<img id="girlImg" src="girl.jpg" alt=""> <button class="downloadBtn" type="button" οnclick="downloadImg()">下载图片</button>

在对应的JS文件中创建点击方法

function downloadImg(){
       var img = document.getElementById('girlImg'); // 获取要下载的图片
       var url = img.src;                            // 获取该下载图片的src
       var a = document.createElement('a');          // 创建一个a节点
       var event = new MouseEvent('click')           // 模拟鼠标click点击事件
       a.download = 'beautifulGirl'                  // 下载图片的文件名
       a.href = url;                                 // 将图片的src赋值给a节点的href
       a.dispatchEvent(event)                        // 触发鼠标点击事件
}

Author：oCodeHoney

Date：2020-7-28

Next Post

【Java】解决IDEA因为路径带有中文导致debug报错的问题
Previous Post

【Git】push时远程branch出现问题的情况

CATALOG

1. 参考
2. 解决方案

