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 010110 010101 101100 011011 000110 111100 100000 011101 110110 …

我们把前面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编码/解码的方式。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pyside6入门教学——编写一个UI界面并显示

1、安装Pyside6 输入下列命令安装Pyside6。 pip install Pyside6 2、设计UI 打开Qt设计工具(在安装Pyside6包的目录下)。 【注】我这用的是anaconda虚拟环境,所以我的路径是D:\App\Anaconda3\envs\snake\Lib\site-packages\PySide6。设计…

前端(html+css+javascript)作业--展现家乡的网页

期末期间,老师布置了前端作业,现在放到这里,给各位同志参考。 桂平市是广西壮族自治区的一个美丽的城市,拥有丰富的历史文化和自然景观,属于贵港市管辖,那为什么是看起来是市级而不是县级,其实他…

GaussDB(DWS)查询优化技术大揭秘

GaussDB(DWS)查询优化技术大揭秘 大数据时代,数据量呈爆发式增长,经常面临百亿、千亿数据查询场景,当数据仓库数据量较大、SQL语句执行效率低时,数据仓库性能会受到影响。本文将深入讲解在GaussDB(DWS)中如何进行表结构设计&#…

uni-app 经验分享,从入门到离职(年度实战总结:经验篇)——上传图片以及小程序隐私保护指引设置

文章目录 🔥年度征文📋前言⏬关于专栏 🎯关于上传图片需求🎯前置知识点和示例代码🧩uni.chooseImage()🧩uni.chooseMedia()📌uni.chooseImage() 与 uni.chooseMedia() 🧩uni.chooseF…

5D动感影院新奇体验丰富环境特效7D互动影院

5D动感影院太火啦!凭借真实互动感、全视景高清屏幕、立体环绕音效、D打造新颖沉浸式观影体验,成为年轻人/家长/小朋友的新晋打卡聚集地,时刻上演着精彩绝伦的视觉盛宴! 1、5D动感影院【硬件组成】:动感平台、金属银幕、…

Alinx ZYNQ 7020 LED调试--in RAM

设置拨码开关为JTAG方式 烧写LED bit stream a. 点击“Program device”烧录程序到FPGA中(重新上电程序就丢失了) b. /01_led/led.runs/impl_1/led.bit 程序烧录到Flash中 ZYNQ与以往的直接烧录Flash不同,首先必须PS,然后烧…

PXE和kickstart无人值守安装

PXE高效批量网络装机 引言 1.系统装机的引导方式 启动 操作 系统 1.硬盘 2.光驱(u盘) 3.网络启动 pxe 重装系统? 在已有操作系统 新到货了一台服务器, 装操作系统 系统镜像 u盘 光盘 pe: 小型的 操作系统 在操…

HTTP/HTTPS代理IP在多线程爬虫项目中的实践

在多线程爬虫项目中,HTTP/HTTPS代理IP的实践主要包括以下几个关键步骤: 1. 收集代理IP资源: - 从免费或付费代理IP提供商、公开代理列表网站(如西刺代理、无忧代理等)抓取代理IP和端口信息。 - 存储这些IP到数据库或者…

统计学-R语言-5.3

文章目录 前言分位数统计量的标准误总结 前言 本篇文章即为概率与分布的最后一篇文章。 分位数 分位数函数是累积分布函数的反函数。 p-分位数是具有这样性质的一个值:小于或等于它的概率为p。 根据定义,中位数即50%分位数。 分位数通常用于置信区间的…

RT-Thread 15. list_timer与软定时器

1. 代码 void rt_thread_usr1_entry(void *parameter) {/* set LED2 pin mode to output */rt_pin_mode(LED2_PIN, PIN_MODE_OUTPUT);while (1){rt_pin_write(LED2_PIN, PIN_HIGH);rt_thread_mdelay(2000);rt_pin_write(LED2_PIN, PIN_LOW);rt_thread_mdelay(3000);} }int ma…

前端公共组件库优化

背景 前段时间入职了新公司后,做一些内部前端基建的工作,其中一个工作就是优化现有的frontend-common公共组件库。之前的组件库一直是以源码依赖的形式存在,即各个项目通过git submodule的方式将该仓库引入到各个项目中,作为一个…

【K8S 云原生】K8S的对外服务—ingress

目录 一、K8S的Service 1、Service的作用 2、Service类型: 二、ingress 1、ingress的组成: 2、ingress资源的定义项: 3、ingress暴露服务端的方式 3.1、DeploymentLoadBalancer模式: 1、工作流程图: 3.2、Dae…

PDF转PowerPoint - Java实现方法

通过编程实现PDF转PPT的功能,可以自动化转换过程,减少手动操作的工作量,并根据需要进行批量转换。将PDF文件转换为PPT文档后,可以利用PPT的丰富功能和动画效果,达到更好的演示效果。 在Java中,我们可以使用…

PyTorch损失函数(二)

损失函数 5、nn.L1Loss nn.L1Loss是一个用于计算输入和目标之间差异的损失函数,它计算输入和目标之间的绝对值差异。 主要参数: reduction:计算模式,可以是none、sum或mean。 none:逐个元素计算损失,返…

清晰光谱空间:全自动可调波长系统的高光谱成像优势

高光谱成像技术 高光谱成像技术是一种捕获和分析宽波长信息的技术,能够对材料和特征进行详细的光谱分析和识别。高光谱成像技术的实现通过高光谱相机,其工作原理是使用多个光学传感器或光学滤波器分离不同波长的光,并捕获每个波段的图像&…

Node+Express编写接口---服务端

开始: 个人兴趣爱好,欢迎大家多多指教!(点击直达源码!) node_vue_admin: 第一个以node为后端,vue为前端的后台管理项目https://gitee.com/ah-ah-bao/node_vue_admin.git 第一步:安装 安装Node.js 点击直达Node.js (nodejs.org) 安装Navic…

点赞模块设计 - Redis缓存 + 定时写入数据库实现高性能点赞功能

点赞模块设计 - Redis缓存 定时写入数据库实现高性能点赞功能 源码地址:github.com/cachecats/c… 点赞是作为整个系统的一个小模块,代码在 user-service 用户服务下。 本文基于 SpringCloud, 用户发起点赞、取消点赞后先存入 Redis 中,再…

WordPress回收站自动清空时间?如何关闭回收站或设置自动清理天数?

我们在WordPress后台的文章、页面、评论等页面都可以看到有回收站,意思就是我们不能直接删除某篇文章、页面、评论,而是需要现将它们移至回收站,然后再到回收站永久删除,或等回收站自动清理。 如上图所示,WordPress 6.…

javacv和opencv对图文视频编辑-裸眼3D图片制作

通过斗鸡眼,将左右两张相似的图片叠加到一起看,就会有3D效果。 3D图片,3D眼镜,3D视频等原理类似,都是通过两眼视觉差引起脑补产生3D效果。 图片: 图片来源: 一些我拍摄的真*裸眼3D照片 - 哔哩…

Java21 + SpringBoot3集成Spring Data JPA

Java21 SpringBoot3集成Spring Data JPA 文章目录 Java21 SpringBoot3集成Spring Data JPA前言相关技术简介ORM(Object-Relational Mapping,对象-关系映射)JPA(Java Persistence API,Java持久层API)Hiber…