【uniapp】微信小程序 普通图片路径和base64格式图片 保存图片到相册

第一种:普通图片路径

uni.downloadFile({
    url: this.saveImg, //图片地址
    success: function(res) {
	    const tempFilePath = res.tempFilePath
		uni.saveImageToPhotosAlbum({
		    filePath: tempFilePath,
			success: function() {
                // 保存成功
            },
            fail: function(err) {
                // 保存失败
            }
		})
    },
    fail: function(err){
        console.log(err)
    }
})

第二种:base64格式的图片

// base64ImgUrl 是你要保存图片的Base64字符串
let saveImg=base64ImgUrl.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
uni.getFileSystemManager().writeFile({
    filePath: wx.env.USER_DATA_PATH + '/imageName.png',
	data: saveImg,
	encoding: 'base64',
	success: res2 => {
		uni.saveImageToPhotosAlbum({
			filePath: wx.env.USER_DATA_PATH + '/imageName.png',
			success: function() {
                //保存成功
            },
            fail: function() {
                //保存失败
            }
		})
	},
    fail: err2 => {
        console.log(err2)
    }
})

以上便是两种保存图片的方式。 

uni-app项目开发中,如果需要将图片转换成base64格式传递给后端,可以使用插件来实现。首先,需要引入插件到项目中,插件地址为\[1\]。该插件提供了两种方法,一种是将图片路径转换为base64的方法pathToBase64(),另一种是将base64保存为文件的方法base64ToPath()。可以使用import语句引入pathToBase64base64ToPath方法\[1\]。 在uniapp官网中明确指出,image标签的src属性支持base64码\[2\]。但是需要注意的是,base64码可能会很长,可能会包含换行符\r \n。为了处理这个问题,可以使用replace()方法将换行符替换为空字符串,以去除换行符\[2\]。 如果需要将图像路径转换为base64,可以使用pathToBase64方法。需要注意的是,uni-app微信小程序和5+APP使用的路径不支持网络路径,如果是网络路径,需要先使用下载API将图像下载下来\[3\]。可以使用pathToBase64(path)方法将图像路径转换为base64\[3\]。 总结起来,可以使用插件中的pathToBase64方法将图片路径转换为base64,并使用replace()方法去除换行符\[1\]\[2\]。 #### 引用[.reference_title] - *1* [uni-app中将图片路径转成Base64](https://blog.csdn.net/weixin_45744454/article/details/121122229)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniappBase64图片的显示问题以及保存相册](https://blog.csdn.net/Zhuangvi/article/details/130581363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uni-app 中如何实现图片Base64](https://blog.csdn.net/m0_61173407/article/details/122329343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值