音视频开发之重拾图片

1.像素

一张图片60 50的分辨率 说明这张图片每一行有60个像素 共50行 总共有60 50 = 3000个像素 每个像素都有自己独立的颜色

也就是说如果一张图片的分辨率是W*H那么每一行都有W个像素共有H行 总共W*H个像素 宽度为W 高度为H 每个像素都有自己独立的颜色

2.RGB 颜色模型（RGB color model）又称为三原色光模式，每个像素的颜色可以通过 red blue green以不同的含量混合而成

3.位深度

每一个像素的颜色信息如何存储的呢？

3.1：取决于图片的位深度（Bit Depth）也称为：色彩深度（Color depth）简称色深

3.2：如果一张图片的位深度为n,那么它的每一个像素都会使用n个二进制来存储颜色信息

24bit位深度的含义：

1.每个像素都会使用24个二进制来存储颜色信息

2.每个像素的颜色都是由red blue green 三个颜色通道合成的

3.每个颜色通道都用8bit来表示其含量 取值范围：

二进制：00000000~11111111

十进制：0~255

十六进制：00~FF

举例说明：

01000000 11100000 11010000 共24bit

red: 01000000 十进制：64 十六进制：40

green: 11100000 十进制：224 十六进制：E0

blue：11010000 十进制：208 十六进制：D0

黑色是世界上最纯洁的颜色 rgb(0,0,0) 0x000000

白色是世界上最复杂的颜色 rgb（255， 255，255）0xffffff

关于32bit 基于24bit 增加8个位的透明通道，可以表示带有透明度的颜色，比如CSS种rgba（255，0，0，0.5）表示50%透明度的红色

关于颜色数量：

如果位深度为n,那么没一个像素能显示2^n,所以位深度为24时 可以显示2^24种颜色 也就是16777216种颜色

24bit也被称作真彩色（True Color） 也就是常说24位真彩

位深度越大，能表示的颜色数量就越多图片也就越鲜艳，颜色过渡就会越平滑

图片格式：png jpg gif 统一叫位图 svg为矢量图

一张图片的大小是如何计算出来的？

假设一张图片的分辨率位60*50，位深度为24，所以：

每个像素的大小是 24bit(3字节 1字节 = 8bit) 每个像素用24位二进制来表达

图片的理论大小为 60 * 50 * （24 / 8）= 9000B ≈ 8.79kb

之所以比图片理论计算大小少，是因为在相同分辨率，相同位深度的前提下，把图片存成不同的格式（jpg png）都是经过压缩后的图片，所以他们的大小会比理论值偏小

图片的压缩类型可以分为2种：

1.无损压缩 （不损失图片质量，压缩率低，体积大，解压后能够还原原始图片数据，不会损失任何图片信息 ）

2.有损压缩 （会损失图片质量，压缩率高，体积小，解压后无法还原图片的原始数据， 会损失一些图片信息）

jpg jepg 有损压缩 24bit

png 无损压缩 8/24/32 bit

gif 无损压缩

当人眼看到的影像 消失以后，人眼仍能继续保持0.1s~0.4s左右，这种现象被称为视觉暂留现象，

我们使用的日光灯每秒大约熄灭100余次，但我们基本感受不到日光灯的闪动这都是因为视觉暂留现象，

在一帧图片消失在大脑之前呈现出下一张图片，反复如此，就可以形成连贯的动画效果

早期电影的帧率24fps

fps:每秒的帧数 Frames Per Second

帧数越多动画效果越好