Convert base64 to image format in uniapp

Convert images to base64 in uni-app

---

Method to realize

base64 to image format (js)

You can use the atob() and btoa() functions in JavaScript to convert Base64 to images.

First, use the atob() function to convert the Base64-encoded string to binary data. Then, convert the binary data to a Blob object and create a URL object. Finally, the image is displayed by assigning a URL object to the image's src attribute.

Here is a sample code:

// 假设您已经有一个 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)

Note that you need to remove the from the base64String data:image/png;base64,in order for the atob() function to decode the string correctly.

If you need to convert a Base64-encoded string to a file and save it in the local file system, use a file system API such as FileWriter or FileSystem API.

---

base64 to image format (uniapp)

In Uniapp, you can use the uni.base64ToArrayBuffer() API to convert a base64 string to ArrayBuffer format and then convert it to a Blob object. You can then use the URL.createObjectURL() method to create a Blob URL and eventually display it on the page.

Here is a code example:

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

The base64Str here is the base64 string you want to convert, and the type can be modified according to the actual situation. The final imgUrl is the generated Blob URL, which can be bound to the src attribute of the img tag to display the image.

base64 to image format (WeChat’s own method)

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

The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.

---

How to obtain source code:

Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~

Member learning group: [One-to-one Q&A]

If there is anything you don’t understand in the tutorial, you can add a learning member assistant for consultation (WeChat: mifankeji77)