音視頻之圖片(一)

寫於開始音視頻學習之前

馬上就要開始學習mj老師的音視頻課程了，為了增加學習的效率，就用博客園記錄一下自己的學習過程。想根據mj的視頻，自己總結出來圖片和聲音兩篇博客，構思半天，發現mj關於圖片和聲音的博客確實是最好的素材，我就在他的基礎上稍加改動。

簡述

音視頻顧名思義，音視頻分為音頻和視頻。音頻對應的就是聲音，而視頻對應的就是圖片

像素(Pixel)

以下的圖片的分辨率是60x50。

用Photoshop放大圖片上百倍后，可以清晰地看到圖片由若干個方形的色塊組成，每一個方形的色塊被稱為：像素（Pixel）。這張圖片的每一行都有60個像素，共50行，總共60*50=3000個像素。

總結一下：

• 每張圖片都是由N個像素組成的（N≥1）

如果一張圖片的分辨率是WxH，那么：

• 每一行都有W個像素，共H行，總共W*H個像素
• 寬度是W像素，高度是H像素

每個像素都有自己獨立的顏色，若干個像素就組成了一張色彩繽紛的完整圖片。

RGB顏色模型

1666年，偉大的科學家牛頓進行了著名的色散實驗：用一塊三棱鏡分解太陽光。

實驗發現：太陽光通過三棱鏡折射后，會被折射分散成紅、橙、黃、綠、藍、靛、紫7種單色光。其中的紅、綠、藍被稱為是色光三原色。

接下來，再看一個很重要的概念：RGB顏色模型（RGB color model），又稱為三原色光模式。

• 將紅（Red）、綠（Green）、藍（Blue）三原色的色光以不同的含量相疊加，可以合成產生各種色彩光

每個像素的顏色，可以通過紅色、綠色、藍色以不同的含量混合而成。比如：

• 紅色（Red）、綠色（Green）可以合成：黃色（Yellow）

紅色（Red）、藍色（Blue）可以合成：洋紅色（Magenta）

綠色（Green）、藍色（Blue）可以合成：青色（Cyan）

紅色（Red）、綠色（Green）、藍色（Blue）可以合成：白色（White）

位深度

每一個像素的顏色信息是如何存儲的呢？

• 取決於圖片的位深度（Bit Depth），也稱為：色彩深度（Color Depth，簡稱：色深）

如果一張圖片的位深度為n，那么它的每一個像素都會使用n個二進制位來存儲顏色信息，window上如下圖所示

• 查閱資料了半天，也沒發現mac上面圖片怎么展示位深度的(很是尷尬)

24bit位深度的含義

上圖的位深度是24，它的具體含義是：

• 每一個像素都會使用24個二進制位來存儲顏色信息

每一個像素的顏色都是由紅（Red）、綠（Green）、藍（Blue）3個顏色通道合成的

每個顏色通道都用8bit來表示其“含量”（值），取值范圍是：

• 二進制：00000000~11111111
• 十進制：0~255
• 十六進制：00~FF

舉例：01000000 11100000 11010000（共24bit）表示綠寶石色（Turquoise）

• 紅色的值：二進制01000000，十進制64，十六進制40
• 綠色的值：二進制11100000，十進制224，十六進制E0
• 藍色的值：二進制11010000，十進制208，十六進制D0
• 64的紅色 + 224的綠色 + 208的藍色 = 綠寶石色

24bit顏色的表示形式

我們常用2種形式來表示24bit顏色，比如剛才提到的綠寶石色

• 十進制：rgb(64, 224, 208)

十六進制：#40E0D0

常見的24bit顏色：

• 紅色：rgb(255, 0, 0)，#FF0000

綠色：rgb(0, 255, 0)，#00FF00

藍色：rgb(0, 0, 255)，#0000FF

黃色：rgb(255, 255, 0)，#FFFF00

洋紅色：rgb(255, 0, 255)，#FF00FF

青色：rgb(0, 255, 255)，#00FFFF

白色：rgb(255, 255, 255)，#FFFFFF

黑色：rgb(0, 0, 0)，#000000

• 當紅綠藍全為0時，就是黑色
• 這個其實很容易理解：沒有任何光，自然是一片漆黑
• 所以說：黑色是世界上最純潔的顏色，因為它啥也沒有，(づ｡◕ᴗᴗ◕｡)づ
• 相反，白色是世界上最不純潔的顏色，因為它啥都有，而且都是滿色（全是255）

更多顏色，可以參考顏色對照表，紅綠藍的比例不同，合成的顏色也就不同

顏色數量

如果位深度為n，那么每一個像素能顯示2ⁿ種顏色。

• 所以，位深度為24時，每一個像素能顯示2²⁴種顏色，也就是16777216種顏色（約1678萬）

24bit顏色，也被稱為是：真彩色（True Color），也就是常說的24位真彩

其他位深度

除了24bit，常見的位深度還有：

• 1bit：2種顏色，黑白兩色

3bit：8種顏色，用於大部分早期的電腦顯示器，紅綠藍各占1位

8bit：256種顏色，用於最早期的彩色Unix工作站，紅色占3位、綠色占3位、藍色占2位

16bit：紅色占5位、藍色占5位、綠色占6位

32bit：基於24位，增加8個位的透明通道

• 可以表示帶有透明度的顏色
• 比如CSS中的rgba(255, 0, 0, 0.5)表示50%透明度的紅色

不同位深度的對比

位深度越大，能表示的顏色數量就越多，圖片也就越鮮艷，顏色過渡就會越平滑。下面的圖片來源自Tech-ease。

• 24bit（能表示約1678萬種顏色） 

8bit（能表示256種顏色） 

7bit（能表示128種顏色） 

6bit（能表示64種顏色） 

5bit（能表示32種顏色） 

4bit（能表示16種顏色） 

3bit（能表示8種顏色） 

2bit（能表示4種顏色） 

1bit（能表示2種顏色） 

格式

一說到圖片，大家應該馬上能想到拓展名為jpg、png、gif的圖片文件。

每張圖片都有自己的大小，你是否思考過：一張圖片的大小是如何計算出來的？為什么dragon01.jpg的大小是288KB？

• 要想知道一張圖片的大小是多少？首先得知道每個像素的大小是多少。

如果位深度是n，那么每個像素的大小就是n個二進制位

下圖的分辨率是60x50，位深度是24，所以：

• 每個像素的大小是：24bit（3字節，1字節=8bit）

圖片的理論大小是：(60*50)*(24/8)=9000B≈8.79KB

但實際上你會發現：在相同分辨率、相同位深度的前提下，把這張圖片存成2種不同的格式（jpg、png），它們的大小是不同的，而且都小於理論上的8.79KB。

其實jpg、png都是經過壓縮后的圖片（具體的壓縮算法和原理，就不在此討論了，大家可以到網上自行搜索），所以它們的大小會比理論值偏小。

圖片的壓縮類型可以分為2種：

• 無損壓縮
• 不損失圖片質量
• 壓縮比小，體積大
• 解壓（顯示）后能夠還原出完整的原始圖片數據，不會損失任何圖片信息

有損壓縮

• 會損失圖片質量
• 壓縮比大，體積小
• 解壓（顯示）后無法還原出完整的原始圖片數據，會損失掉一些圖片信息

壓縮比 = 未壓縮大小 / 壓縮后大小

壓縮類型	位深度
JPG（JPEG）	有損壓縮	24bit
PNG	無損壓縮	8bit、24bit、32bit
GIF	無損壓縮	8bit

GIF

眾所周知，gif是一種支持動畫的圖片，所以一般也叫作gif動態圖，微信的動態表情包就是基於gif動態圖。

gif動畫的實現原理類似手翻書。

gif的動畫原理是：

• gif內部存儲了很多幀（張）靜態圖片

在短時間內，連續按順序地呈現每一幀靜態圖片，就形成了動畫的效果

像上面那張《悟空vs克林》的gif動態圖，它內部存儲了44幀靜態圖，只要按順序從01.jpg播放到44.jpg，就能呈現出連貫的動畫效果。

不管是gif動態圖，還是手翻書，它們的動畫原理其實都基於：視覺暫留（Persistence of vision）現象。

• 當人眼所看到的影像消失后，人眼仍能繼續保留其影像約0.1~0.4秒左右，這種現象被稱為視覺暫留現象

人眼觀看物體時，成像於視網膜上，並由視神經輸入人腦，感覺到物體的像，但當物體移去時，視神經對物體的印象不會立即消失，而要延續0.1~0.4秒的時間，人眼的這種性質被稱為“眼睛的視覺暫留” 

我們日常使用的日光燈每秒大約熄滅100余次，但我們基本感覺不到日光燈的閃動，這都是因為視覺暫留的作用

在一幀圖片消失在大腦中之前呈現下一幀圖片，反復如此，就可以形成連貫的動畫效果

• 電影的幀率是24fps
• fps：每秒的幀數，Frames Per Second

參考博客地址: https://www.cnblogs.com/mjios/p/14661561.html