uni-app 微信小程序如何把图片保存到本地相册?
上一篇我们分享了 uni-app 微信小程序生成小程序码二维码带参数 那么我们分享成功后就需要把生成的小程序码图片保存到相册,用于给他人分享。开始我以为不需要写什么,生成后长按就可以自己保存呢。我真是异想天开啊,没有那么简单,是需要我们写的呢,下面就来分享一下:uni-app 微信小程序如何把图片保存到本地相册?
效果图如下:
思路:
- 需要用户授权,允许保存到自己的相册
- 将图片保存到用的手机上
根据以上思路我们就来写一下吧。
savePoster() { uni.getSetting({ //获取用户的当前设置 success: (res) => { if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册 this.saveImageToPhotosAlbum(); } else { uni.authorize({ //如果没有授权,向用户发起请求 scope: 'scope.writePhotosAlbum', success: () => { this.saveImageToPhotosAlbum(); }, fail: () => { uni.showToast({ title: "请打开保存相册权限,再点击保存相册分享", icon: "none", duration: 3000 }); setTimeout(() => { uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册 success: (res2) => { // console.log(res2.authSetting) } }); }, 3000); } }) } } }) },
下面来保存到手机相册
saveImageToPhotosAlbum() { let base64 = this.src2.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64, let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; uni.showLoading({ title: '加载中', mask: true }) uni.getFileSystemManager().writeFile({ filePath: filePath, //创建一个临时文件名 data: base64, //写入的文本或二进制数据 encoding: 'base64', //写入当前文件的字符编码 success: res => { uni.saveImageToPhotosAlbum({ filePath: filePath, success: function(res2) { uni.hideLoading(); uni.showToast({ title: '保存成功,请从相册选择再分享', icon: "none", duration: 5000 }) }, fail: function(err) { uni.hideLoading(); // console.log(err.errMsg); } }) }, fail: err => { uni.hideLoading(); //console.log(err) } }) },
完成以上代码就可以实现把小程序的图片保存到手机相册了。
—— 微信小程序学习资源下载—–
1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘
更多学习教程,小月博客持续更新…