base64转图片格式的三种方法 及保存

base64转图片格式（原生js用法） Blob 方法微信小程序不支持

// 假设您已经有一个 Base64 编码的字符串
const base64String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
// 将 Base64 编码的字符串转换为二进制数据
const binaryString = atob(base64String.split(',')[1])
// 将二进制数据转换为 Blob 对象
const blob = new Blob([binaryString], { type: 'image/png' })
// 创建 URL 对象并将其分配给图像的 src 属性
const image = new Image()
image.src = URL.createObjectURL(blob)
// 将图像添加到文档中
document.body.appendChild(image)

需要将 base64String 中的 data:image/png;base64, 删除，以便 atob() 函数正确解码该字符串。

base64转图片格式（uniapp）Blob 方法微信小程序不支持

// 将base64字符串转换为ArrayBuffer格式
const arrayBuffer = uni.base64ToArrayBuffer(base64Str);

// 将ArrayBuffer转换为Blob对象
const blob = new Blob([arrayBuffer], { type: 'image/png' });

// 创建Blob URL
const imgUrl = URL.createObjectURL(blob);

// 在页面上显示图片
this.imgUrl = imgUrl;

base64转图片格式（微信自带方法）uniapp小程序可用

//把base64转换成图片
getBase64ImageUrl(base64Url) {
	/// 获取到base64Data
	var base64Data = base64Url;
	/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
	base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
	/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
	const base64ImgUrl = "data:image/png;base64," + base64Data;
	/// 得到的base64ImgUrl直接给图片:src使用即可
	return base64ImgUrl;
}

uniapp 或 微信小程序把base64的图片保存到手机相册

wx.saveImageToPhotosAlbum(Object object)保存图片到系统相册。参数filePath图片文件路径，可以是临时文件路径或永久文件路径 (本地路径) ，不支持网络路径。
base64路径的话需要创建一个临时文件的文件名再保存。

	// 保存base64 图片到相册  点击触发函数
	const seve_base64_image = () => {
		//获取文件管理器对象
		let fs = wx.getFileSystemManager()
		// 创建的临时路径
		let Imgpath = wx.env.USER_DATA_PATH + '/qrcodeImg' + '.png'
		// 传入你的base64  去掉前面的前缀
		let imageSrc = douy_img.value.replace(/^data:image\/\w+;base64,/, '')
		//写入本地文件
		fs.writeFile({
			filePath: Imgpath,
			data: imageSrc,
			encoding: 'base64',
			success(res) {
				//保存到手机相册
				wx.saveImageToPhotosAlbum({
					filePath: Imgpath,
					success(res) {
						console.log(res)
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					},
					fail: function(err) {
						console.log("失败", err)
					}
				})
			}
		})





	}