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

最新推荐文章于 2024-09-25 14:12:34 发布

悠哉大王想摸鱼

最新推荐文章于 2024-09-25 14:12:34 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uni-app小程序图片处理文章标签：小程序 js

本文链接：https://blog.youkuaiyun.com/wzard/article/details/115665854

uni-app小程序图片处理专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果直接用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)
					}
				})
			}