从半张残缺的图片说起

一、前言

最近元宇宙很火，昨天小扎同志把Facebook改名叫Meta，真是连脸都不要了，元宇宙是人们娱乐、生活乃至工作的虚拟时空，整合了AR/VR，区块链，AI等技术，都很高大上，很遗憾这些技术我都不懂，那么我还是讲讲我能讲明白的技术吧，事情是这样的，昨天一同事在重构邮件发送功能的时候，要将图片显示在邮件正文中，收到邮件后发现图片是残缺的，如下图左侧所示，右侧是原图。

二、图片使用Base64编码

如下图所示ICON图标，我们用Base64编码后嵌入HTML看一下效果

1、获取ICON图标的Base64值

2、嵌入HTML

Img标签嵌入base64编码图片，只需要加上base64的头。

data:image/jpg;base64,图片base64值

如果我把base64编码最后两行去掉，图片展示出来就是半个勾了。

浏览器会对base64图片进行编解码

1、在浏览器的地址栏输入【data:image/jpeg;base64, 图片base64值】 ,就可以显示出图像。

2、审查元素，选中图片，Reveal in Source Panel，Copy image as data URL，就可以查看网络图片的Base64编码值。

三、Base64编码

1、编码原理

Base64就是使用64个字符( [a-z]、[A-Z]、[0-9]、+ 、/ ) 做为字符集，其它所有符号都转换为这个字符集中的字符，另外还有一个字符 “=”是用来做填充的。

编码步骤

1、将三个字节共24个二进制位做为一组，不够三个字节末尾补“=”。

2、将24个二进制位分为4组，每个组6位二进制位。

3、在每组前面加上00，扩展成32个二进制位，即四个字节。

4、根据Base64编码表，得到每个字节对应的符号。

一个base64编码例子，用我最喜欢一个英文单词。

money做Base64编码后就是  bW9uZXk= 

如果是汉字，它本身有多种编码格式，如GBK、UTF-8编码生成的Base64值是不同的。

注：解码过程倒过来就好不细讲，以前写 高效的ProtoBuf  也是这样只管杀不管埋，这是咱的风格。

2、应用场景

• 加密数据可读性，将生成的加密字节数据做Base64编码转换为字符串，如3Des加密码结果做base64。

• 数字证书

• 电子邮件传输的数据

• ICON Base64编码 减少请求次数优化性能。

四、残缺图片的原因

同事读取远程图片的时候，直接用InputStream的available方法获取字节数，这个方法在读本地文件是没有问题的，但在Socket通讯时，因为网络是间断性这个图片可能会分批发送，这样available方法得到的字节数就少了，然后只读取图片的部分信息，转换成Base64邮件发送出去，图片就只有半截了。