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快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘
更多学习教程,小月博客持续更新…























