阅读 1072

图片与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 大致计算公式

size = 水平像素 * 垂直像素 * 位深度

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

位深度:每个像素使用的颜色所占位数。(1字节=8位)

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

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

  1. 位深度为1的二值图

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

  1. 常说的RGB24位图

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

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

3.base64和图片流大小换算

图片大小 = base64字符长度 * (3/4) - x;
x 的值为0、1或2,如果base64最后是以2个'='结束,则x的值是2,如果是1个'=',则为1,没有则为0

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值去掉;

文章分类
前端
文章标签