微信小程序实现将图片保存到手机相册
水星记_ 时间:2022-08-15
前言
图片保存到手机相册的功能相信大家一定都用过吧,今天教你用微信小程序实现这个好玩的小功能。
实现效果如下:
实现思路:
首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用wx.saveImageToPhotosAlbum方法保存图片到系统相册,需要注意的是这样写很可能会因为没有权限而导致下载不了图片,所以我们最后还需要给接口一个调用失败的回调函数,以此来获取权限,最后这个小功能就实现啦。
源码如下:
wxml文件
<!-- 按钮触发事件 --><button bindtap="downloadImg">点击下载图片</button>
- 1
- 2
js文件
const app = getApp(); //获取app实例Page({ data: { modalType: false, //弹框默认不显示 imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片 }, // 点击下载图片事件 downloadImg() { wx.showLoading({ title: '加载中...' }); //wx.downloadFile方法:下载文件资源到本地 wx.downloadFile({ url: this.data.imgUrl, //图片地址 success: function (res) { //wx.saveImageToPhotosAlbum方法:保存图片到系统相册 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, //图片文件路径 success: function (data) { wx.hideLoading(); //隐藏 loading 提示框 wx.showModal({ title: '提示', content: '保存成功', modalType: false, }) }, // 接口调用失败的回调函数 fail: function (err) { if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") { wx.showModal({ title: '提示', content: '需要您授权保存相册', modalType: false, success: modalSuccess => { wx.openSetting({ success(settingdata) { console.log("settingdata", settingdata) if (settingdata.authSetting['scope.writePhotosAlbum']) { wx.showModal({ title: '提示', content: '获取权限成功,再次点击图片即可保存', modalType: false, }) } else { wx.showModal({ title: '提示', content: '获取权限失败,将无法保存到相册哦~', modalType: false, }) } }, fail(failData) { console.log("failData", failData) }, complete(finishData) { console.log("finishData", finishData) } }) } }) } }, complete(res) { wx.hideLoading(); //隐藏 loading 提示框 } }) } }) }})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。