图片与Base64换算关系

1. 名词解释

1.1 像素

像素：是指在由一个数字序列表示的图像中的一个最小单位，即基本单元，不可在拆分。在图片中表现形式为一个个小方格，包含颜色和位置信息。

1.2 分辨率

1.2.1 显示器分辨率

显示器显示图像的分辨率。它是指可以使显示器显示的像素个数，通常用每行像素数列乘每列像素数列。

例如：1024×768，表示显示器可以显示768行，1024列，共可现实786432个像素

显示分辨率的水平像素和垂直像素的总数总是成一定比例的，一般为4:3、5:4或8:5。

在相同大小的屏幕上，分辨率越高，显示就越小。当屏幕大小固定，像素值多少随着分辨率改变，但是字体和图标本身所依赖的像素的个数不变（可以理解字体本身大小不变，例如：font-size：20px），所以屏幕中每个像素的物理宽度高就变大/变小了。像素点越多，每个像素的实际占据屏幕的宽高越小，像素与像素之间越连贯，质量越好，否则就是满屏幕的马赛克。

1.2.2 图像分辨率

图像分辨率指图像中存储的信息量，是每英寸图像内有多少个像素点，图像分辨率概念更趋近于分辨率这三个字名词本身的定义。

1.3 位图

位图图像（bitmap），亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。

2. 图片大小的计算

2.1 大致计算公式

举例：一幅图像分辨率：1024*768,24位，则其大小计算如下： 图片大小=1024 * 768 * 24 = 2359296byte / 8 = 2304KB

位深度：每个像素使用的颜色所占位数。（1字节=8位）

常见的位深度有1、4、8、16、24 及 32 位图像等

举两个例子来表达为位深度所代表的含义

1. 位深度为1的二值图

二值图所表现出的样子是黑白图，每个像素的颜色深度只有1位，即值就只有0和1。

2. 常说的RGB24位图

RGB24位图被称为真彩色图像，是由3个通道组成，分别为红、绿、蓝。 rgb图中每个像素的颜色是由三种颜色共同作用合成一个颜色，每个像素都可能具有2^(8*3)种颜色，是空间立体来组成的一幅图片。

通俗讲就是一个三层纸压在一起，如图所示，一共三层通道，例如红色那层的灰度值很大（灰度值越大，颜色越鲜亮），绿和蓝没有灰度值，那么合在一起就是红色，如果绿蓝有一定的灰度值，那么合在一起纯红色就会被其他色影响，从而形成新的肉眼所见到的颜色。真色图一共有3个通道，每个通道（即红、绿、蓝）需要8位展示各自的颜色，那么rgb24位真彩图一共需要24位来表达每个像素值的颜色，所以位深度为24。

3.base64和图片流大小换算

3.1 base64编解码原理

首先需要知道，图片转换成base64并不是加解密，而是编解码，主要的作用不在于安全性，而在于让内容能在各个网关间无错的传输，这才是Base64编码的核心作用。

3.1.1 base64编码原理

Base64编码是基于64个字符A-Z,a-z，0-9，+，/的编码方式，因为2的6次方正好为64，所以用6位就可以表示出这64个字符了。一个字节是8位，而6位就能表达64个字符，所以取3个字符（3*8 =24位）就可以凑齐24位，然后把24位转换成4个6位的字符，然后在字节前面都填两个高位 0，形成4个新的字符。

编码流程： 以3个字符为一组，然后针对每组，首先获取每个字符的ASCII编码(字符’a’=97=01100001)，然后将ASCII编码转换成8bit的二进制，得到一组3*8=24bit 的字节。然后再将这24bit划分为4个6bit的字节，并在每个6bit的字节前面都填两个高位0，得到4个8bit的字节，然后将这4个8bit的字节转换成十进制

3.1.2 base64解码原理

（1）先去掉等号；

（2）再根据编码表，找编码字符对应的编码值；

（3）取各编码值的8位二进制值，去掉每个二进制的前2位的0值，然后连接形成二进制串；

（4）对上述二进制串，从前到后，每8位构成一个字节的数据；多余的末尾0值去掉；