uni-app小程序保存base64图片到相册

该博客介绍了如何在uni-app中处理Base64格式的图片,通过uni FileSystemManager.writeFile方法将Base64转换为本地二进制文件,然后使用uni.saveImageToPhotosAlbum保存至用户相册。涉及的步骤包括权限检查、用户授权以及错误处理。
摘要由CSDN通过智能技术生成

如果直接用wx.downloadFile方法保存base64图片会有报错提示,我们使用uni.FileSystemManager.writeFile 将 ArrayBuffer 写为本地用户路径的二进制图片文件来下载base64图片

直接上代码:

<image :src='img_' mode="widthFix"></image>

<button @click="saveAlbum()">保存至相册</button>
			//保存相册
			saveAlbum(){
				uni.getSetting({//获取用户的当前设置
					success:(res)=> {
						if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						}else{
							uni.authorize({//如果没有授权,向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success:()=> {
									this.saveImageToPhotosAlbum();
								},
								fail:()=>{
									uni.showModal({
										content:'检测到您没打开保存图片的权限,是否去设置打开?',
											confirmText: "确认",
											cancelText:'取消',
											success: (res) => {
												if(res.confirm){
													uni.openSetting({
														success: (res) => {
															console.log(res);
															// this.getLocation();
														}
													})
												}else{
													console.log('取消');
													return false;
												}
											}
									})
									setTimeout(()=>{
										uni.openSetting({//调起客户端小程序设置界面,让用户开启访问相册
											success:(res2)=> {
												// console.log(res2.authSetting)
											}
										});
									},3000);
								}
							})
						}
					}
				})

			},
			saveImageToPhotosAlbum(){
				let base64=this.img_.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
				let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
				uni.getFileSystemManager().writeFile({
					filePath:filePath ,  //创建一个临时文件名
					data: base64,    //写入的文本或二进制数据
					encoding: 'base64',  //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								// 	title: '保存成功',
							},
							fail: function(err) {
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						//console.log(err)
					}
				})
			}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值