uniapp 或小程序中保存网络图片及保存base64位图片的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 或小程序中保存网络图片及保存base64位图片的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp 或原生小程序中保存网络图片及保存base64位图片的方法

正常网络图片或本地图片可以使用 uni.downloadFile或者 uni.getImageInfo api进行处理，最后使用uni.saveImageToPhotosAlbum进行处理，
保存base64图片需要使用uni.getFileSystemManager().writeFile写入文件，成功后调用uni.saveImageToPhotosAlbum

使用getImageInfo

getImageInfo

	data() {
			return { imageUrl:'https://img0.baidu.com/it/u=3564324437,2903688591&fm=26&fmt=auto' }
		},
		methods: {
			save() {
				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: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum(){
				wx.getImageInfo({
				  src: this.imageUrl,
				  success: res=> {
				      wx.saveImageToPhotosAlbum({
				        filePath: res.path,
				        success(res) {
				          wx.showToast({ title: '保存图片成功！', })
				        },
				        fail(err) {
				          wx.showToast({ title: '保存图片失败！', })
				        }
				      })
				  },
				  fail: err => {
				  	console.log(err,'err')
				  }
				})
			}
		}

使用downloadFile

downloadFile

		data() {
			return { imageUrl:'https://img0.baidu.com/it/u=3564324437,2903688591&fm=26&fmt=auto' }
		},
		methods: {
			save() {
				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: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum(){
				wx.downloadFile({
				  url: this.imageUrl,
				  success: res=> {
				   if (res.statusCode === 200) {
				     wx.saveImageToPhotosAlbum({
				       filePath: res.tempFilePath,
				       success(res) {
				         wx.showToast({ title: '保存图片成功！', })
				       },
				       fail(res) {
				         wx.showToast({ title: '保存图片失败！', })
				       }
				     })
				   }
				  },
				  fail: err => {
				  	console.log(err,'err')
				  }
				})
			}
		}

使用uni.getFileSystemManager().writeFile保存base64

**注意：使用此方法要删除掉返回数据中含有的data:image/png;base64,时，data参数需要写成：imageUrl.slice(22)或者使用替换也可以，此外，在小程序中可能base64不显示的问题，在赋值之前使用 imageUrl.replace(/[\r\n]/g, '')**

getFileSystemManager().writeFile文章来源地址https://www.toymoban.com/news/detail-523348.html

	methods: {
			save() {
				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: 2000
									})
									let timer = setTimeout(() => {
										clearTimeout(timer)
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: e => {}
										})
									}, 2000)
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum(){
				  var imgSrc = this.imageUrl//base64编码
				    var number = Math.random()
				     wx.getFileSystemManager().writeFile({
				      filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
				      data: imgSrc,
				      encoding: 'base64',
				      success: res => {
				        wx.saveImageToPhotosAlbum({
				          filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
				          success: function (res) {
				            wx.showToast({ title: '保存成功', })
				          },
				          fail: function (err) {
				            console.log(err)
				          }
				        })
				        console.log(res)
				      }, fail: err => {
				        console.log(err)
				      }
				    })
			}
		}