当前位置：首页 > article >正文

JS判断是否为base64字符串如何转换为图片src格式

article 2024/12/29 13:48:20

需求背景：

如何判断后端给返回的 字符串是否为 base-64 位呢？
以及如果判断为是的话，如何给它进行转换为 img 标签可使用的那种 src 格式 呢？

1、判断字符串是否为 base64

以下方法，可自行挨个试试，哪个好使就用哪个。

（1）第一种方法：

function isBase64(str) {
	try {
		return btoa(atob(str)) === str;
	} catch (err) {
		return false;
	}
}

这个方法接受一个 字符串 作为参数，如果 字符串是 base64 编码 则返回 true，否则返回 false。

使用 chatGPT 搜索：

检测一个 字符串是否为 base64 编码的 JavaScript 函数。它的作用是将输入的字符串进行 base64 解码，然后再将解码后的字符串重新进行 base64 编码，最后判断重新编码后的字符串是否与输入的字符串相同。如果相同，则说明输入的字符串是 base64 编码，否则不是。

具体来说，代码中的 atob() 函数 用于将 base64 编码的字符串解码，btoa() 函数 用于将 解码后的字符串重新编码为 base64 编码。如果输入的字符串是一个有效的 base64 编码，那么它经过解码和重新编码后应该与原始字符串相同，因此使用 btoa(atob(str)) === str 进行判断。如果解码或重新编码失败，那么这个字符串就不是一个有效的 base64 编码，函数会返回 false。

需要注意的是，这种方法只能检测字符串是否符合 base64 编码的格式，但并不能保证其是一个合法的 base64 编码。

（2）第二种方法：

function isBase64(str) {
	// 正则表达式匹配B4-64编码格式
	const regex = /^[a-zA-Z0-9+\/]+={0,2}$/;
	return regex.test(str);
}

2、如何转换base64为图片src格式

=> base64 字符串前面 加个 base 头 ，直接扔到 src 里面就能显示了，例如：

data:image/xxx;base64, （ data:image/png;base64, ）

一开始写的是： data:image/png; 后控制台报错如下；

加上 base64, 就好了

接下来，可以在 Vue 组件中使用这个方法来处理后端返回的数据。以下是一个示例代码：

<template>
	<div v-if="isImage">
		<img :src="imgSrc" />
	</div>
	<div v-else>
		{{ data }}
	</div>
</template>

<script>
export default {
	props: {
		data: {
			type: String,
			required: true,
		},
	},
	computed: {
		isImage() {
			return isBase64(this.data);
		},
		imgSrc() {
            // data:image/png;base64,
			return 'data:image/png;base64,' + this.data;
		},
	},
};
</script>

在这个组件中，使用了一个 computed 属性 isImage() 来判断后端返回的数据是否为 base64 编码。如果是，则 v-if 为 true 显示一个 img 标签，并使用另一个 computed 属性 imgSrc() 来生成 img 标签的 src 属性值。如果不是，则直接显示原始数据。

需要注意的是，在这个示例代码中，假设图片的格式为 png ，如果需要支持其他格式的图片，需要修改 imgSrc 属性的值。（当然，这里建议的是，前端跟后端去协商，让后端将 data:image/xxx;base64, 字段信息返回给你，由后端去判断定义是什么图片格式的类型（ jpg / png / xxx ）然后再传给前端去进行开头拼接就 OK 了）

测试 demo ：