聊聊编码那些事，顺带实现base64

2023-12-18 15:38
文章标签 实现 编码 聊聊 base64 顺带

本文主要是介绍聊聊编码那些事，顺带实现base64，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 进制间的转换

    • 对任意进制的数进行任意进制转换
    • 将任意进制数转换为十进制数
    • 几道关于parseInt的面试题
  • 编码发展历史

  • base64编码

    • 为什么需要base64

  • 如何实现base64

    • 读取buffer转为json对象
    • 将10进制转为2进制
    • 将2进制拼一起3*8然后分隔成4*6
    • 然后将2进制转成10进制
    • base64码
    • 取到每一个base64码
  • 小结

前言

日常工作中，频繁的使用base64取代小图标，以便减少HTTP请求进而达到性能优化的目的。基于此来聊聊编码的发展、为什么需要base64以及如何实现base64。此文章首发于聊聊编码那些事，顺带实现base64转载请注明来源。

进制间的转换

一些前置知识，也涉及到一些经典的面试小题。

对任意进制的数进行任意进制转换

Number.prototype.toString(radix)

将任意进制数转换为十进制数

parseInt(string, radix)

几道关于parseInt的面试题

说到parseInt，不得不提到一个很有意思的面试题

// 会输出什么？
[1, 2, 3].map(parseInt)
// => 1, NaN, NaN

map方法第一个参数为函数，函数有三个参数，array.map((item, index, array) => { ... })

实际上相当于

function fn (item, index) {return parseInt(item, index)
}
[1, 2, 3].map(fn)
// parseInt迭代过程相当于如下
// parseInt(1, 0) => 1
// parseInt(2, 1) => NaN
// parseInt(3, 2) => NaN

再来看一个类似的面试题

// 会输出什么？
'1 2 3'.replace(/\d/g, parseInt)
// => 1, NaN, 3

replace方法第二个参数若是一个函数，函数会有若干个参数。第一个为匹配模式的字符串；第二个为与模式中子表达式匹配的字符串，可以有零个或多个这样的参数。

实际上相当于如下

function fn (...args) {// 只会取前两个参数return parseInt(args[0], args[1])
}
'1 2 3'.replace(/\d/g, fn)
// parseInt迭代过程相当于如下
// parseInt('1', 0) => 1
// parseInt('2', 2) => NaN
// parseInt('3', 4) => 3

其实在mdn中对parseInt/map/replace已经讲解的很详细，期望大家在工作之余不要太过浮躁，别做伸手党，静下心来啃一下文档并多做实践，很多面试题自然会迎刃而解。

编码发展历史

ASCII

GBK2312

GBK

GB18030/DBCS

Unicode

UTF-8

现在的标准，有如下特点

  • UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式
  • UTF-8就是每次以8个位为单位传输数据
  • 而UTF-16就是每次 16 个位
  • UTF-8 最大的一个特点，就是它是一种变长的编码方式
  • Unicode 一个中文字符占 2 个字节，而 UTF-8 一个中文字符占 3 个字节
  • UTF-8 是 Unicode 的实现方式之一

base64编码

为什么需要base64

在开发时，经常会有一些小图标图片，每一个图片都会有一次HTTP请求，由于浏览器对同一个域名的并发数量有限制，所以我们应该尽可能减少HTTP请求个数。

本文主要讲解编码相关，那就只讲解从编码入手如何去减少HTTP请求。

在计算机内部，任何信息最终都是使用一系列二进制存储，图片也不例外。

而且在img标签的src属性后跟上一个base64字符，如果该字符有效，那么会正常显示图片。

如何实现base64

以下涉及的所有代码均在仓库中，感兴趣的可以自取。

读取buffer转为json对象

首先准备一个2.txt文件。

冯兰兰啊我说今晚月色这么美，你说是的。

case.js代码

const fs = require('mz/fs')
const path = require('path')// 读取成buffer对象
async function read2JSON () {let ret = await fs.readFile(path.resolve(__dirname, '2.txt'))console.log(ret.toJSON())return ret.toJSON()
}
read2JSON()
// => { type: 'Buffer', data: [ 229, 134, 175, 229... ] }

上面的依赖mz/fs已经将fs都包装成promise，所以我们能写的更像同步。

readFile函数如果第二个参数没有指定会读取成一个buffer流，是由一个个16进制数组合在一起的。

buffer.toJSON可以将一个buffer流转为一个json对象，十六进制也会被转十进制。如上输出所示。

将10进制转为2进制

十进制转为二进制可以通过Number.toString(2)方法

// 将10进制转为2进制
async function data2b () {let data = await read2JSON()let ret = []data.data.forEach(item => {ret.push(item.toString(2))})console.log(ret)return ret
}
data2b()
// => [ '11100101', '10000110', '10101111', '11100101'...]

将2进制拼一起3*8然后分隔成4*6

一个汉字在UTF-8规范中由三个字节组成，一个字节由8个二进制物理位构成。所以一个汉字实际占用内存3*8，base64中我们实际需要6个物理位表示一个字节即2**6，所以做重新分割4*6。

async function split () {let data = await data2b()let dataStr = data.join('')let ret = []let splitUnit = 6let flag = 0while (flag < dataStr.length) {ret.push(dataStr.substr(flag, splitUnit))flag = flag + splitUnit}console.log(ret)return ret
}
split()
// => [ '111001', '011000', '011010', '101111'...]

然后将2进制转成10进制

二进制转为十进制可以通过parseInt(string, 2)方法

async function data20 () {let data = await split()let ret = data.map(item => {return parseInt(item, 2)})console.log(ret)return ret
}
data20()
// => [ 57, 24, 26, 47, 57, 24, 22, 48, 57, 24, 22, 48 ]

base64码

base64中的64实际上是根据2**6所来，表示则由大写字母、小写字母、数字、+/构成。

const lowerCases = 'abcdefghijklmnopqrstuvwxyz'
const numbers = '0123456789'
const base64lib = `${lowerCases.toUpperCase()}${lowerCases}${numbers}+/`
console.log(base64lib)
// => ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

取到每一个base64码

然后我们则可以取到每一个base64码

async function main () {let data = await data20()let ret = []data.forEach(item => {ret.push(base64lib[item])})console.log(ret.join(''))return ret.join()
}main()
// => 5Yav5YWw5YWw5ZWK5oiR6K+05LuK5pma5pyI6Imy6L+Z5LmI576O77yM5L2g6K+05piv55qE44CC

我们可以前往base64在线转码解码进行验证。

encoding-base64-decode

简化代码

对以上思路进行代码简化

const CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
function transfer (str) {let buf = Buffer.from(str)let result = ''for(let b of buf){result += b.toString(2)}return result.match(/(\d{6})/g).map(val => parseInt(val, 2)).map(val => CHARTS[val]).join('')
}
let fl = transfer('冯')
console.log(fl) // => 5Yav

小结

如上我们可以实现将中文转为base64，同理我们也可以转换图片。

async function read2JSON () {// let ret = await fs.readFile(path.resolve(__dirname, '2.txt'))// 读取图片let ret = await fs.readFile(path.resolve(__dirname, '../assets/encoding-base64-example.png'))console.log(ret.toJSON())return ret.toJSON()
}

特别的： 由于将2进制拼一起3*8然后分隔成4*6，原来存储一个汉字需要三个字节，现在需要四个字节存储，所以转换为base64后会比之前大3/1。

下面笑脸图片则是由img的src属性展示的，不过本文并没有实现图片转base64，因为其逻辑较为复杂，但是本文讲解了大致思路，感兴趣的可再做深究。

encoding-base64-example

encoding-base64-code

这篇关于聊聊编码那些事，顺带实现base64的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/508948。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
BUUCTF（34）特殊的 BASE64

BUUCTF（34）特殊的 BASE64

使用pycharm时，如果想把代码撤销到之前的状态可以用 Ctrl+z 如果不小心撤销多了，可以用 Ctrl+Shift+Z 还原， 别傻傻的重新敲了 BUUCTF在线评测 (buuoj.cn) 查看字符串，想到base64的变表 这里用的c++的标准程序库中的string，头文件是#include<string> 这是base64的加密函数 std::string
阅读更多...
C++——stack、queue的实现及deque的介绍

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2