一文读懂base64编码

我们知道字节的可表示范围是0到255（十六进制：0x00到0xFF），其中ASCII值的范围是0到127（十六进制：0x00到0x7F）和128，超出了ASCII范围。 ~255（十六进制：0x80 ~0xFF）是非打印字符。

ASCII（美国信息交换标准代码）是一种基于拉丁字母的计算机编码系统。它主要用来表示现代英语，但美国标准信息交换码的扩展版本对其他西欧语言有部分支持，相当于国际标准ISO/IEC 646。

在ASCII 码中，有33 个字符是控制字符：0 到31 和127。一些控制字符如下所示。

其余95个，即32到126个，是可打印字符，包括数字、大小写字母、常用符号等。

** 当通过网络发送不可见字符时（例如从计算机A 到计算机B），它们通常必须经过多个路由设备。由于不同的设备处理字符的方式不同，这些不可见的字符可能无法正确处理，这可能是有害的。去发送吧。 **为了解决这个问题，可以先将数据编码为可见字符，例如Base64编码，即可以用ASCII码表示的可见字符，从而保证数据的可靠传输。 Base64 内容由0-9、a-z、A-Z、+、/组成，正好64 个字符。这些字符在ASCII 可表示的范围内，并且是可显示的95 个字符的一部分。

二、什么是 base64

Base64 是基于64 个可打印字符的二进制数据的表示形式。 2=64，所以每6位为一个单元，对应一个可打印字符。 3个字节是24位，对应4个Base64单元。也就是说，4个可打印字符可以表示3个字节。相应的转换过程如下图所示。

**Base64 通常在处理文本数据以表示、传输和存储二进制数据（例如MIME 电子邮件或XML 中的复杂数据）时使用。 **MIME 格式的电子邮件可以使用base64 将二进制字节序列数据编码为由ASCII 字符序列组成的文本。如果您使用它，请指定base64作为传输编码。使用的字符包括26个大小写拉丁字母、10个数字、一个加号+和一个斜杠/，总共64个字符，并使用等号=作为后缀。 Base64对应的索引表为：

了解了以上知识后，我们以编码Man字符串为例来直观感受一下编码过程。 Man由字母M、a、n组成，对应的ASCII码为77、97、110。

接下来以每6位为单位进行base64编码操作，如下图所示。

可以看到，Man（3字节）编码结果为TWFu（4字节），经过base64编码后，容量增加了1/3。字符串Man的长度正好是3，所以我们可以用4个Base64单位来表示它。但是如果要编码的字符串长度不是3的整数倍怎么办？

如果要编码的字节数不能被 3 整除，最后会多出 1 个或 2 个字节，那么可以使用下面的方法进行处理：先使用 0 字节值在末尾补足，使其能够被 3 整除，然后再进行 base64 的编码。

以编码字符A为例。该字符占1个字节，不能被3整除。您需要添加2 个字节，如下图所示。

从上图中可以看到，字符A经过base64编码后的结果是QQ==，结果后面的两个=代表补充字节数。最后一个Base64 字节块有4 位，值为0。

现在让我们看另一个例子。如果要编码的字符串是BC，占用字节数为2且不能被3整除，则需要增加1个字节，如下图所示。

从上图中可以看到，字符串BC进行Base64编码的结果为QkM=，其中结果后面的1=代表补充字节数。最后一个Base64 字节块有两位值为0。

三、base64 编码的应用

3.1 显示 base64 编码的图片

创建HTML 网页时，对于简单图像，您通常选择将图像内容直接嵌入到网页中。这减少了不必要的网络请求。然而，图像数据是二进制数据。嵌入方法。大多数现代浏览器都支持称为数据URL 的功能。这允许您对图像或其他文件中的二进制数据进行Base64 编码，并将其作为文本字符串嵌入网页中。

数据URL 由四部分组成：前缀( data: )、指示数据类型的MIME 类型、可选的Base64 标记（如果是非文本）以及数据本身。

data:[mediatype][;base64]，其中datamediatype 是MIME 类型字符串。例如，“image/jpeg”表示JPEG图像文件。如果省略，则默认值为text/plain;charset=US-ASCII。如果数据类型是文本，则可以直接嵌入文本（使用适当的实体字符或转义字符，具体取决于文档类型）。对于二进制数据，您可以在嵌入之前对数据进行Base64 编码。例如，要嵌入图像：

img alt=’logo’ src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUg.’MIME（多用途互联网邮件扩展）是一种多用途互联网邮件扩展类型，指的是具有特定扩展名的文件，您可以使用扩展名打开它。对于应用程序模式类型，当您访问具有此扩展名的文件时，浏览器会自动使用指定的应用程序打开该文件。这主要用于指定客户端定义的文件名以及如何打开媒体文件。

常见的MIME 类型包括超文本标记语言文本.html text/html、PNG 图像.png image/png 和纯文本.txt text/plain。

但请注意，如果图像较大且图像的颜色层次比较丰富，则此方法可能不适合，因为图像的Base64 编码字符串会很大，从而显着增加HTML 的大小。影响页面加载速度。此外，HTML FileReader API 可以轻松实现本地图像预览功能。具体代码如下。

输入类型=’文件’accept=’image/*’ onchange=’loadFile(event)’img id=’output’/script constloadFile=function(event) { const Reader=new FileReader.onload=function (){ const; Output=document.querySelector(‘output’); Output.src=Reader.result; Reader.readAsDataURL(event.target.files[0]);/script 预览本地图像后，输入对应的数据URL您可以直接将图像发送到服务器。针对这种情况，服务器必须进行一些相关处理才能成功保存上传的图片。下面是Express的具体处理代码：

const app=require(‘express’)();app.post(‘/upload’, function(req, res){ let imgData=req.body.imgData; //通过POST 请求获取Base64 图像数据letbase64Data=imgData .替换(/^data:image\/\w+;base64,/, ”); let dataBuffer=Buffer.from(base64Data, ‘base64’); fs.writeFile(‘image.png’, dataBuffer, function(err) ) { if(err){ res.send(err); }else{ res.send(‘图片上传成功！’) } });});

3.2 浏览器端图片压缩

上传本地图片时，发送的数据量减少首先将图像压缩到一定程度，然后再将其发送到服务器。要在前端实现图像压缩，可以使用Canvas对象提供的toDataURL()方法。此方法采用两个可选参数：类型和编码器选项。

type表示图片格式，默认为image/png。当您将图像格式指定为image/jpeg 或image/webp 时，encoderOptions 允许您在0 到1 之间选择图像质量。如果值超出范围，则使用默认值0.92，忽略其他参数。

让我们看看如何实现图像压缩。

//compress.jsconst MAX_WIDTH=800; //最大图像宽度function compress(base64,quality, mimeType) { let Canvas=document.createElement(‘canvas’); let img=document.createElement(‘img’); ‘匿名’; return new Promise((resolve, Accept)={ img.src=base64; img.onload=()={ let targetWidth, targetHeight; if (img.width MAX_WIDTH) { targetWidth=MAX_WIDTH; targetHeight=(img .height * MAX_WIDTH)/img.width; } else { targetWidth=img.width=img.height; } let ctx=Canvas.getContext ); //清除canvas Clear ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height); 100 );solve(imageData); }; });} Data 将URL格式返回的图像数据转换为Blob对象即可。

函数dataUrlToBlob(base64, mimeType) { let bytes=window.atob(base64.split(‘,’)[1]); let ab=new ArrayBuffer(bytes.length); let ia=new Uint8Array(ab);=0; i bytes.length; i++) { ia[i]=bytes.charCodeAt(i); } return new Blob([ab], { type: mimeType });} 转换完成后，即可对其进行压缩。最终图像对应的Blob对象被封装在FormData对象中，并通过AJAX发送到服务器。

function UploadFile(url, blob) { let formData=new FormData(); let request=new XMLHttpRequest(); formData.append(‘POST’, url, true); send(formData);}实际上，Canvas 对象是() 方法，它还提供了toBlob() 方法。该方法的语法是：

Canvas.toBlob(callback, mimeType,qualityArgument) 与toDataURL() 方法相比，toBlob() 方法是异步的，因此有一个额外的回调参数。该回调方法默认第一个参数是转换后的BLOB文件信息。

介绍完了上面的内容，我们来看一个完整的本地图像压缩的例子。

!DOCTYPE htmlhtml head meta charset=’UTF-8’/meta name=’viewport’ content=’width=设备宽度，初始比例=1.0’/title 本地图片压缩/title /head body 输入类型=’文件’ Accept=’image/*’ onchange=’loadFile(event)’/script src=’./compress.js’/script script constloadFile=function (event) { const Reader=new FileReader()=async function () {让crashDataURL=等待压缩(reader.result, 90, ‘image/jpeg’); 让crashImageBlob=dataUrlToBlob(compressedDataURL); }; readAsDataURL(event.target.files[0]); JavaScript 有两个函数用于处理base64 字符串解码和编码。

btoa()：该函数基于二进制数据“字符串”创建一个Base64 编码的ASCII 字符串。 atob()：该函数可以解码base64编码的字符串数据。

四、如何进行 base64 编码和解码

const name=’Semlinker’;const encodedName=btoa(name);console.log(encodedName); //U2VtbGlua2Vy

4.1 btoa 使用示例

const encodedName=’U2VtbGlua2Vy’;const name=atob(encodedName);console.log( name); //对于Semlinker 来说，atob 和btoa 两个方法中，a 代表ASCII，b 代表二进制Blob。因此，atob 提供了ASCII 的二进制表示形式用于解码操作。另外，btoa 表示将二进制转换为ASCII，对应于编码操作。一旦理解了方法中a和b的含义，您将避免在以后的工作中错误地使用它们。