oCodeHoney's BLOG

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

字数统计: 201阅读时长: 1 min
2020/07/28 Share

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

参考

解决方案

HTML代码

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

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

1
2
3
4
5
6
7
8
9
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


CATALOG
  1. 1. 参考
  2. 2. 解决方案