uniapp 怎么讲base64解码成图片
时间: 2024-01-23 10:15:03 浏览: 36
在uniapp中,可以使用以下方法将base64解码成图片:
```javascript
// 把base64转换成图片
getBase64ImageUrl(base64Url) {
// 获取到base64Data
var base64Data = base64Url;
// 通过uniapp自带方法将base64转为二进制去除特殊符号,再转回base64
base64Data = uni.arrayBufferToBase64(uni.base64ToArrayBuffer(base64Data));
// 拼接请求头,data格式可以为image/png或者image/jpeg等,根据需求进行修改
const base64ImgUrl = "data:image/png;base64," + base64Data;
// 返回解码后的base64ImgUrl,可以将其绑定到img标签的src属性上显示图片
return base64ImgUrl;
}
```
使用以上方法,可以将base64字符串解码成图片,并将生成的Blob URL绑定到img标签的src属性上,从而显示图片。
相关问题
uniapp中base64.js 对使用base64解码方法
在uniapp中使用base64解码方法,你可以使用uni.base64ToArrayBuffer方法。以下是一个简单的示例代码:
```javascript
// 导入base64.js文件
import base64 from '@/path/to/base64.js'
// 要解码的base64字符串
const base64Str = 'SGVsbG8gVW5pYXBw'
// 使用uni.base64ToArrayBuffer方法解码
const arrayBuffer = uni.base64ToArrayBuffer(base64Str)
// 将ArrayBuffer转换为字符串
const decodedStr = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))
console.log(decodedStr) // 输出:Hello Uniapp
```
上述代码中,我们首先导入了base64.js文件(请根据实际路径进行修改)。然后,我们定义了要解码的base64字符串。接下来,我们使用uni.base64ToArrayBuffer方法将base64字符串解码为ArrayBuffer。最后,我们将解码后的ArrayBuffer转换为字符串,并打印出来。
请注意,以上代码仅适用于uniapp框架,并假设你已经正确导入了base64.js文件。
uniapp base64转图片显示
你可以通过uniapp自带的base64解码方法将base64字符串转换成二进制数据,然后使用uniapp提供的Image组件进行显示。具体实现方法如下:
1. 使用uniapp提供的Base64.js文件中的方法解码,代码示例:
```
import base64 from '@/common/uniapp-base64.js'
let base64Str = 'data:image/png;base64,xxxxxxxxxx'; // base64字符串
let blob = base64.toBlob(base64Str);
let url = URL.createObjectURL(blob);
```
2. 在页面中使用Image组件显示图片,代码示例:
```
<template>
<div>
<image :src="imgUrl" />
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: ''
}
},
mounted() {
let base64Str = 'data:image/png;base64,xxxxxxxxxx'; // base64字符串
let blob = base64.toBlob(base64Str);
this.imgUrl = URL.createObjectURL(blob);
}
}
</script>
```
注意:在使用完URL.createObjectURL方法后,需要手动释放URL对象,可以在组件销毁前调用URL.revokeObjectURL方法释放URL对象。