给产品经理讲技术｜嘿，我用字符画了一张图，你能认出来吗？

2016-06-22 09:08:00

喏，就是这个。

data:image/png;base64,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

这是用字符表示的一张图，你知道怎么看吗？没关系，我来告诉你。

我们先从计算机存储信息开始。这篇文章介绍了二进制文件和文本文件的一些概念。总结起来就几句话：

计算机是用二进制存储数据的。

计算机也可以用字符存储数据，但归根到底还是会把字符用二进制表示。

二进制表示字符的方法叫做编码，最基础的ASCII编码中，8个bit的二进制，表示一个字符，如01000010表示字母A，算成十进制就是65。这样的ASCII码一共有256个，正好是2的8次方。

我们常见的文件，有的用二进制存储，比如exe文件、jpeg图片文件等等，也有的用字符存储，比如html网页，再比如txt文本文件。(btw，你觉得word文件是二进制还是文本呢？）

好，进入正题。既然图片是二进制文件，如何用字符文本来表示呢？这就要靠今天的猪脚，Base64了。

Base64是一种用字符来表示二进制的编码方式，之所以起名叫Base64，是因为它只有64个可以用的字符，分别是a-z，A-Z，0-9以及+和/。我们来看一下整个编码过程。

假如说有一串二进制：

010010001000010000010000

一共24个bit，在base64编码的时候，每6个bit是一组。为什么是6呢？因为6个二进制bit刚好可以表达64以内的所有数字，不多不少。有个公式，有几位，就可以表示2的几次方内的数字。6位是64，8位是256，也就是ASCII码。有个笑话，有人借程序员100块，程序员说你干嘛不凑个整数呢，给你128吧。就是这么来的。

我们取6个bit为一组。分别是:

010010

001000

010000

100000

把它们分别转换成十进制，就是18、8、16、32。然后拿这些数字去下面的Base64索引表里找对应的字符，分别是S、I、Q和g。这样编码工作就完成了，上面的二进制串经过Base64编码后，成了SIQg。如果你有耐心，可以打开一张图片的二进制文件，把所有二进制bit编码成Base64，就像我在文章开头贴的那样。（我是用工具做的）

产品经理

哦，还有一点补充，如果二进制的bit数，不能被6整除怎么办呢？有两种情况，一种是编码到最后，发现剩余1个byte（8bit），那么补4个0，凑成12个bit，分成两组，然后编码，最后需要在Base64字符后加两个=号。补等号的目的是把Base64再反向解码的时候，需要知道补了多少个0。（看看上面的编码是不是有两个=号？）

举个例子，假设最后剩下10001000，那么补4个0，就是100010000000，分成两组，是100010和000000，翻译成十进制是34和0，分别对应i和A。那么最后编码就是iA==

还有一种最后剩下两个byte（16bit），那么就补2个bit凑成18bit，分3组。最后补上一个=号，就不多说了。

你可能会问，费了这么大劲，又是二进制又是文本的，转来转去，究竟有什么卵用啊？我来告诉你，其实是很有用的。

一个就是直接在HTML文件中直接插入图片。一般来说，如果一个网页里有图片，那么整个网页拉取就要至少分成两个HTTP请求，一个用来请求文本，一个用来请求图片。但是，我们之前讲过，新建一个HTTP连接是很浪费时间和资源的（这也是为什么推送的时候要用长连接）。如果直接把图片编码成Base64，插入到HTML里，就可以节约一次请求了。

但是有个问题，那就是使用Base64编码之后，整个文件会变大。比如上面的例子，我们有24bit也就是3个byte的二进制数据，经过Base64编码后，成了4个字符。在存储和传输Base64的字符的时候，每个字符又要8个bit（这是必须的），最后变成了32个bit，增大了33%。所以一般来说，不会用Base64来编码大图片，小图片倒是可以用用。

还有一个，有时候需要在URL的参数里传一些二进制的数据，这时候就不能直接传，而应该先进行Base64编码。为什么呢？在ASCII码里，前128个字符是可以打印的，像我们平时遇到的abcd1234之类的。后128个是控制字符，有的表示回车，有的表示换行，等等。如果直接在URL里传二进制，默认经过ASCII编码，那么有的就会编码成控制字符被解释成其他含义，就容易出错。

哦，对了，你只需要把开头的一段字符串复制到浏览器的地址栏打开，就能看到是什么图片了，快去看看吧。

关键字：产品经理, 二进制文件, 二进制, base64

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！