Base64编码原理解析

文章目录

  • 一、Base64
    • Base64编码的原理如下:
      • 以字符串"hello world"为例,它的ASCII码为(下面👇是ASCII码对照表):
      • 将这些ASCII码转换为二进制(对照上表):
      • 将上述二进制数据分成每6位一组:
  • 二、javascript中 base64 编码与解码的方式
  • 总结


一、Base64

Base64编码是一种将二进制数据转换成ASCII字符的编码方式。它将每3个字节的二进制数据分成4个6位的组,然后将这些6位的值转换成可打印的ASCII字符。编码后的数据长度通常会比原始数据多出1/3。

Base64编码的原理如下:

  1. 将需要编码的数据(原始数据)分割成每3个字节一组(每个字节有8位),即24位。
  2. 将这24位数据分成4个6位的组。如果原始数据长度不是3的倍数,会有1或2个字节剩余,需要进行补零操作。
  3. 将每个6位的组转换为一个Base64字符。Base64字符集由A-Z、a-z、0-9、+和/共64个字符组成。

以字符串"hello world"为例,它的ASCII码为(下面👇是ASCII码对照表):

104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100

请添加图片描述

将这些ASCII码转换为二进制(对照上表):

01101000, 01100101, 01101100, 01101100, 01101111, 00100000, 01110111, 01101111, 01110010, 01101100, 01100100

将上述二进制数据分成每6位一组:

011010, 000110, 010110, 110001, 101101, 101111, 001000, 011101, 111011, 100110, 011001, 100111, 011010, 011001, 100111, 011100

我们把前面2个拿来分析下原理,在 JavaScript 中,可以使用 parseInt 函数将二进制字符串转换为十进制数值,所以有下面的结果26,6 其他结果类似推导

let binary = '011010';
let decimal = parseInt(binary, 2);

console.log(decimal); // 输出 26
 

011010 -> 26
000110 -> 6

转换的依据是Base64编码规则,其中将每6位二进制数转换为一个Base64字符。Base64字符集包含A-Z、a-z、0-9、+和/共64个字符。

将二进制数转换为Base64字符的步骤如下:

  1. 将6位二进制数转换为十进制数。
  2. 根据十进制数对应的字符在Base64字符集中找到对应的字符。

根据上述步骤,可以得到:
011010 -> 26 -> ‘a’
000110 -> 6 -> ‘G’

因此,上述6位一组的数据转换为Base64字符是’aG’。

将上述6位一组的数据转换为Base64字符:
aGVsbG8gd29ybGQ=

所以,“hello world"字符串的Base64编码结果是"aGVsbG8gd29ybGQ=”

二、javascript中 base64 编码与解码的方式

在JavaScript中,可以使用btoa()函数进行Base64编码,使用atob()函数进行Base64解码。

编码示例:

let str = 'Hello World';
let encodedStr = btoa(str);
console.log(encodedStr); // "SGVsbG8gV29ybGQ="

解码示例:

let encodedStr = "SGVsbG8gV29ybGQ=";
let decodedStr = atob(encodedStr);
console.log(decodedStr); // "Hello World"

需要注意的是,btoa()atob()函数只能处理ASCII字符,如果需要编码和解码非ASCII字符,可以使用encodeURIComponent()decodeURIComponent()函数。

let str = '你好,世界';
let encodedStr = btoa(encodeURIComponent(str));
console.log(encodedStr); // "JUU0JUJEJUQwJUU1JUJFJUE2JUU3JTk1JThDJUU4JUJGJUE5"

let encodedStr = "JUU0JUJEJUQwJUU1JUJFJUE2JUU3JTk1JThDJUU4JUJGJUE5";
let decodedStr = decodeURIComponent(atob(encodedStr));
console.log(decodedStr); // "你好,世界"

另外,还可以使用第三方库如Buffer来进行Base64编码和解码。

编码示例:

const Buffer = require('buffer').Buffer;

let str = 'Hello World';
let encodedStr = Buffer.from(str).toString('base64');
console.log(encodedStr); // "SGVsbG8gV29ybGQ="

解码示例:

const Buffer = require('buffer').Buffer;

let encodedStr = "SGVsbG8gV29ybGQ=";
let decodedStr = Buffer.from(encodedStr, 'base64').toString();
console.log(decodedStr); // "Hello World"

总结

今天的内容,简单介绍什么是base64编码以及它编码的原理。接着举例了前端使用base64编码/解码的方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/329967.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TCP 拥塞控制对数据延迟的影响

哈喽大家好,我是咸鱼 今天分享一篇文章,是关于 TCP 拥塞控制对数据延迟产生的影响的。作者在服务延迟变高之后进行抓包分析,结果发现时间花在了 TCP 本身的机制上面:客户端并不是将请求一股脑发送给服务端,而是只发送…

uni-app的组件(二)

多项选择器checkbox-group 多项选择器&#xff0c;内部由多个 checkbox 组成。 <checkbox-group><checkbox checked color"red" value"1"></checkbox> 篮球<!-- disabled:是否禁用 --><checkbox disabled color"rgba(0,0…

设计模式-创建者模式

1.单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一&#xff0c;此模式保证某个类在运行期间&#xff0c;只有一个实例对外提供服务&#xff0c;而这个类被称为单例类。 使用单例模式要做的两件事 1. 保证一个类只有一个实例 2.…

ruoyi-cloud—若依微服务打包部署

1. 前端端口修改 2. 后端端口修改 &#xff08;1&#xff09;修改ruoyi-gateway服务中的bootstrap.yml的port端口 &#xff08;2&#xff09;修改ruoyi-ui中的vue.confing.js的target中的端口 3. 后端部署 (1) 在本地电脑上代码界面上打包后端 在ruoyi项目的bin目录下执行pa…

最新内置30+远程接口,全新API接口管理系统PHP源码,附带系统搭建教程

搭建教程 内置30远程接口doc文件夹可参考自行编辑api文件夹里附赠qrcode接口源码 此程序基于ThinkPHP5.1 PHP版本需7.0-7.3之间。 Nginx请设置如下TP伪静态 Apache无需配置 运行目录默认即可 将程序上传至网站根目录,访问域名/install进行安装操作

如何卸载旧版docker

环境&#xff1a; Docker1.13 centos7.6 问题描述&#xff1a; 如何卸载旧版docker 解决方案&#xff1a; 1.停止Docker服务。使用以下命令停止Docker服务&#xff1a; sudo service docker stop2.卸载Docker软件包。根据您的Linux发行版&#xff0c;使用适当的包管理器来…

GRU门控循环单元神经网络的MATLAB实现(含源代码)

在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;因其在处理序列数据方面的卓越能力而受到广泛关注。GRU&#xff08;门控循环单元&#xff09;作为RNN的一种变体&#xff0c;以其在捕捉时间序列长距离依赖关系方面的高效性而备受推崇。在本文中&#xff0c…

【Redis】Redis如何做内存优化?

​ &#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 ​ 目录 前言 正文 使用数据结构&#xff1a; 压缩对象&#xff1a; 过期策略&#xff1a; 分片&#xff1a; 使用持久化方式&#xff1a…

【React】组件性能优化、高阶组件

文章目录 React性能优化SCUReact更新机制keys的优化render函数被调用shouldComponentUpdatePureComponentshallowEqual方法高阶组件memo 获取DOM方式refs如何使用refref的类型 受控和非受控组件认识受控组件非受控组件 React的高阶组件认识高阶函数高阶组件的定义应用一 – pro…

高校学生选课系统源码开发方案

一、项目背景与目标 &#xff08;一&#xff09;项目背景 随着高校教育的发展&#xff0c;学生选课系统成为了高校管理中不可或缺的一部分。传统的手工选课方式存在着效率低下、易出错等问题&#xff0c;因此需要开发一款高效、便捷的高校学生选课系统。 &#xff08;二&…

【机器学习】机器学习四大类第01课

一、机器学习四大类 有监督学习 (Supervised Learning) 有监督学习是通过已知的输入-输出对&#xff08;即标记过的训练数据&#xff09;来学习函数关系的过程。在训练阶段&#xff0c;模型会根据这些示例调整参数以尽可能准确地预测新的、未见过的数据点的输出。 实例&#x…

使用 vsCode创建GO项目

最近回顾了一下go的使用&#xff1a;具体操作看下面的参考连接&#xff0c;下面只描述一些踩过的坑&#xff1a; 1. go安装配置 安装go->配置go环境变量 推荐官网下载&#xff0c;速度很快&#xff1b; 这里需要配置五个参数&#xff1a;GOPATH/GOROOT/Path、GO111MODULE/…

护眼台灯有AAA级吗?国家AA级护眼灯推荐

在当今这个时代&#xff0c;人们对于知识的需求越来越大。因此&#xff0c;很多的孩子在学业上也是非常的繁忙的&#xff0c;晚上做作业也成为了很多学生的“家常便饭”了&#xff0c;台灯已然成为了很多孩子在夜晚学习的“伙伴”。 然而&#xff0c;很多的家长对于孩子在台灯…

Kali在Vmware无法连接到网络,配置网络及解决办法

一.问题描述&#xff1a; 打开 Kali&#xff0c;无法连接到网络&#xff0c;虚拟机配置正常的。 尝试 ping 百度&#xff0c;出错&#xff1a; ping baidu.com 提示&#xff1a; ping: baidu.com: Temporary failure in name resolution二.解决办法&#xff1a; 1.首先在vmwa…

综述:自动驾驶中的 4D 毫米波雷达

论文链接&#xff1a;《4D Millimeter-Wave Radar in Autonomous Driving: A Survey》 摘要 4D 毫米波 (mmWave) 雷达能够测量目标的距离、方位角、仰角和速度&#xff0c;引起了自动驾驶领域的极大兴趣。这归因于其在极端环境下的稳健性以及出色的速度和高度测量能力。 然而…

开源的Immich自建一个堪比 iCloud 的私有云相册和备份服务

最终效果展示 图片 视频 源码地址 GitHub - immich-app/immich: Self-hosted photo and video backup solution directly from your mobile phone. 1.创建目录 mkdir /data/immich && cd /data/immich 2.下载docker-compose文件和.env文件 wget https://github.c…

TensorRT部署-Windows环境配置

系列文章目录 文章目录 系列文章目录前言一、安装Visual Studio &#xff08;2019&#xff09;二、下载和安装nvidia显卡驱动三、下载CUDA四、下载安装cuDNN五、安装Anaconda六、TensorRT安装七、安装Opencv八、Cmake 配置总结 前言 TensorRT部署-Windows环境配置 一、安装Vis…

SDCMS靶场通过

考察核心&#xff1a;MIME类型检测文件内容敏感语句检测 这个挺搞的&#xff0c;一开始一直以为检查文件后缀名的&#xff0c;每次上传都失败&#xff0c;上传的多了才发现某些后缀名改成php也可通过&#xff0c;png图片文件只把后缀名改成php也可以通过&#xff0c;之前不成功…

新版网易全套识别验证

认真往下看&#xff0c;保证这篇文章B格拉满&#xff01;&#xff01;&#xff01;&#xff01; 距离上次版本更新已经过去好久了&#xff0c;当时只做了滑块&#xff0c;后面朱哥发了一套网易完整版的给我&#xff0c;完事儿也没来得及去看就更新了。 先盘点一下这次更新都做了…

Docker本地私有仓库搭建配置指导

一、说明 因内网主机需要拉取镜像进行Docker应用&#xff0c;因此需要一台带外主机作为内网私有仓库来提供内外其他docker业务主机使用。参考架构如下&#xff1a; 相关资源&#xff1a;加密、Distribution registry、Create and Configure Docker Registry、Registry部署、D…