uniapp中base64转图片格式

uni-app中base64转图片


实现方式

base64转图片格式(js)

您可以使用 JavaScript 中的 atob() 和 btoa() 函数来实现 Base64 转图片的操作。

首先,使用 atob() 函数将 Base64 编码的字符串转换为二进制数据。然后,将二进制数据转换为 Blob 对象,并创建一个 URL 对象。最后,将 URL 对象分配给图像的 src 属性即可显示图片。

以下是一个示例代码:

// 假设您已经有一个 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 编码的字符串转换为文件并将其保存在本地文件系统中,请使用文件系统 API,如 FileWriter 或 FileSystem API。


base64转图片格式(uniapp)

在Uniapp中,可以使用uni.base64ToArrayBuffer() API将base64字符串转换为ArrayBuffer格式,然后将其转换为Blob对象。接着可以使用URL.createObjectURL()方法创建Blob URL,最终将其显示在页面上。

以下是一个代码示例:

// 将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;

这里的base64Str是你要转换的base64字符串,type可以根据实际情况进行修改。最终的imgUrl就是生成的Blob URL,可以将其绑定到img标签的src属性上显示图片。

base64转图片格式(微信自带方法)

//把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;
},

以上代码仅供参考,具体实现细节和样式可以根据需求自行调整。

扫描二维码关注公众号,回复: 16976311 查看本文章

源码获取方法:

需要完整源码的朋友,希望你能点赞+收藏+评论,然后私信我即可~

会员学习群:【一对一答疑】

如果教程中有不懂的地方,可添加学习会员小助手咨询(微信:mifankeji77)

猜你喜欢

转载自blog.csdn.net/weixin_42317757/article/details/130966161