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

这篇具有很好参考价值的文章主要介绍了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)
				      }
				    })
			}
		}

到了这里,关于uniapp 或小程序中保存网络图片及保存base64位图片的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包