uni-app 微信小程序如何把图片保存到本地相册?

uni-app 微信小程序如何把图片保存到本地相册?

上一篇我们分享了 uni-app 微信小程序生成小程序码二维码带参数 那么我们分享成功后就需要把生成的小程序码图片保存到相册,用于给他人分享。开始我以为不需要写什么,生成后长按就可以自己保存呢。我真是异想天开啊,没有那么简单,是需要我们写的呢,下面就来分享一下:uni-app 微信小程序如何把图片保存到本地相册?

效果图如下:

思路:

  1. 需要用户授权,允许保存到自己的相册
  2. 将图片保存到用的手机上

根据以上思路我们就来写一下吧。

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快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程,小月博客持续更新…

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?