您现在的位置是:首页 > 正文

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

2024-04-01 00:09:44阅读 1

需求背景 :

如何判断后端给返回的 字符串 是否为 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 :

网站文章

  • 给我一个java 策略模式和工厂模式一起实用的例子

    策略模式可以用来实现一组可互换的算法,例如在不同环境下使用不同的算法。工厂模式可以用来创建一组相关的对象,例如在一个网站中创建不同类型的用户。一个实用的例子就是使用策略模式和工厂模式来创建一个网站,该网站根据不同的环境使用不同的算法来创建不同类型的用户。 ...

    2024-04-01 00:09:39
  • rmit计算机科学选课,RMIT最强最全的IT Master选课指南,“鼠”于你的高分秘籍!...

    rmit计算机科学选课,RMIT最强最全的IT Master选课指南,“鼠”于你的高分秘籍!...

    RMIT的IT课程设计十分地人性化,每个学期的课程根据自身知识的储备的不同会有多个方向的选择。但是,如果对自己的了解不够深入,或者对课程的英语描述不清楚的同学很容易踩雷。所以RMIT的学霸学长根据自己...

    2024-04-01 00:09:31
  • sql 字段中的百分号

    SQL模糊查询的时候,如果字段中有%,我们又希望查找出所有有%的字段,使用select * from table where name like &#39;%%%&#39;类似的语句是不行的。这时候我们可以使用select * from table where name like &#39;%[%]%。

    2024-04-01 00:09:06
  • Failed to execute goal org.apache.maven.pluginsmaven-install-plugin2.4install (default-install)

    Failed to execute goal org.apache.maven.pluginsmaven-install-plugin2.4install (default-install)

    项目打包的时候,出现下面的报错信息: Failed to execute goal org.apache.maven.plugins:maven-install-plugin:2.4:install ...

    2024-04-01 00:08:53
  • docker理论与安装

    Docker的理论与虚拟机上的安装

    2024-04-01 00:08:27
  • Vue使用js实现时间格式化 filters过滤器

    time | dataFormat(&#39;yyyy.MM.dd hh:mm:ss&#39;) 时间的格式化过滤器 filters: { dataFormat (value, fmt) { let getDate = new Date(value) let o = { &#39;M+&#39;: getDate.getMonth() + 1, &#39;d+&#39;: ge...

    2024-04-01 00:08:14
  • linux服务器内存快要溢出问题排查与解决

    linux服务器内存快要溢出问题排查与解决

    今天在工作的过程中,发现有一台服务器的内存达到了90%以上,所以立即对该台服务器进行了问题排查。 一、 问题排查思路 利用top命令查看进程信息(整体来看) top //使用top命令用于实时显示 process 的动态信息 按大写的M,进行排序内存大的排在前面,按小写的c命令,查看运行命令的绝对路径 查看情况如下图所示: 我们先来看一下java进程占用系统内存高的排查方法 (1) 定...

    2024-04-01 00:08:07
  • 【RabbitMQ】pika.exceptions.IncompatibleProtocolError: (-1, ‘EOF‘)

    【RabbitMQ】pika.exceptions.IncompatibleProtocolError: (-1, ‘EOF‘)

    端口问题

    2024-04-01 00:07:43
  • AutoDL跑pycharm代码

    AutoDL跑pycharm代码

    参考文献:AutoDL帮助文档Pycharm连接远程GPU服务器跑深度学习_哔哩哔哩_bilibili安装包在linux环境下载非常方便!!详解Apex的安装和使用教程_花开山岗红艳艳的博客-CSDN博客_apex安装

    2024-04-01 00:07:37
  • 最简单的http服务器试水

    最基础的http服务器(严格意义上不算)

    2024-04-01 00:07:30