影像與影像元件Image and Image Component

影像處理Oct. 18, 2014

銘傳資工 李遠坤 副教授 編撰

2

大綱1. 影像與像素 Image and Pixel

2. RGB 色彩模型 RGB Color Model

3. 像素格式 Pixel Format

4. 影像元件型態 Image Component Type ( C++ Builder )

3

影像與像素

Image and Pixel

4

影像 Image• 基本上，影像 (image) 就是一個一個的像素 (pixel) 以二

維 (2D) 平面的方式排列而成。

• 影像解析度 (resolution)

所指的就是影像的寬 (width)

與高 (height) ，換句話說，就是影像在水平與垂直方向的像素排列個數。

5

像素 Pixel• 像素 (pixel) 本身最主要的內容就是座標 (coordinate) 與

顏色 (color) 。

• 座標用來描述該像素所在的位置，為一正整數對 (pair) ，通常用 (x, y) 符號表示。

• 顏色則是該像素所呈現的色彩，通常用雙變數函數來表示，如 f(x, y) 代表一張影像上，座標為 (x, y) 上的像素色彩值。

6

RGB 色彩模型

RGB Color Model

7

RGB 色彩模型• 色彩模型是用來表示色彩方式 ,

在螢幕顯示方面 , 最常見的色彩表示方式有 RGB 色彩模型與 YUV 色彩模型。

• RGB 色彩模型又稱為三原色光色彩模型 , 是一種加色模型 ,

將不同程度的紅、綠、藍光加在一起 , 以呈現出不同的色彩。

8

RGB 色彩模型 ( 續 )

• 在三維空間座標上 , 可以用立方體來表示不同程度的紅、綠、藍光 :

X 軸表示紅色程度 ,

Y 軸表示藍色程度 ,

Z 軸表示綠色程度。

X

Y

Z

RGB 三維空間

9

像素格式

Pixel Format

10

11

像素格式 Pixel Format• 像素格式所指的是用來描述像素色彩所採用的格式。

• 一般來說，要描述一個像素色彩所需要的記憶體空間，與所要呈現的總色彩數相關。

• 全彩 (true color) 彩色影像可以呈現 224 種不同顏色，因此共需 24 個位元來描述一個像素的色彩，紅、綠、藍三色分別使用 8 個位元。

12

像素格式 Pixel Format ( 續 )

• 灰階 (gray scale) 影像中的每一個像素都只有呈現 28 種不同明亮度的灰色階，因此，只需 8 個位元來描述一個像素的色彩。

• 黑白 (binary) 影像的像素只有呈現全黑或全白的色彩，因此，每一個像素只需要 1 個位元來表示其色彩。

13

像素格式 Pixel Format ( 續 )

• 像素格式有時會用位元深度 (bit depth) 描述。

• 位元深度就是描述像素色彩所需要的位元數。

14

影像元件型態lmage Component Type

( C++ Builder )

a) 影像元件型態 TImage

b) 圖像元件型態 TPicture

c) 位元圖元件型態 TBitmap

15

影像元件型態 TImage• C++ Builder 提供影像元件型態 TImage 來儲存或顯示影

像資料。在工具盤 (Tool Palette) 分類中是屬於 Additional 分類。

• 只要雙擊 TImage 影像元件型態，就可以在應用程式的畫面 (Form) 中新增一個影像元件，名稱則內定為 Image1 ，使用者可從物件檢視器 (Object Inspector) 檢視影像元件的各項屬性，也可以直接進行更改。

16

影像元件型態 TImage ( 續 )

影像元件常用屬性 (Property)

• AutoSize : 影像元件大小會隨著載入的影像大小調整。

• Height: 影像元件高度。

• Hint: 當滑鼠移到影像位置時 ,

所顯示的提示文字。

• Left : 影像元件水平位置。

• Name: 影像元件名稱。

17

影像元件型態 TImage ( 續 )

影像元件常用屬性 (Property)

• Picture: 所載入的影像，本身亦是一個物件。

• ShowHint: 是否顯示提示文字。

• Stretch: 是否將所載入影像內容強制依比例調整成影像大小。

• Top: 影像元件垂直位置。

• Transparent: 是否顯示背景色。

18

影像元件型態 TImage ( 續 )

影像元件常用屬性 (Property)

• Visible: 是否顯示影像。

• Width: 影像元件寬度。

19

圖像元件型態 TPicture• Property Picture 是 TImage 影

像元件中最重要的一個屬性。

• Picture 本身就是一個物件，用來存放影像內容的物件。

• 點擊此處可開啟 Picture

Editor ，可以直接載入 (Load…) 、儲存 (Save…) 或移除 (Clear) 所載入的影像。

20

圖像元件型態 TPicture ( 續 )

• Picture Editor 可以載入 (Load…) 、儲存 (Save…) 或移除 (Clear) 所載入的影像。

載入一張 155*125 bmp 影像

21

圖像元件型態 TPicture ( 續 )

• 由於原來影像寬、高均設定為 105 ，因此只顯示出左上部影像。可以將 Property AutoSize 更改為 true ，影像寬、高值就會隨著載入的影像大小調整了。

22

圖像元件型態 TPicture ( 續 )

• 接下來若不希望顯示背景色可以將 Property

Transparent 改為 true ，就不會顯示出背景色了。

23

圖像元件型態 TPicture ( 續 )

• 將 Property Transparent 設定成 true ，白色背景沒有顯示出來。

24

位元圖元件型態 TBitmap

• TPicture 物件包含一個 Bitmap 物件，其元件型態名稱為 TBitmap 。影像像素的色彩值就是一個像素 (pixel) 接著一個像素存放在 Bitmap 物件之中。

• TBitmap 元件型態的色彩描述方式採用 RGB 色彩模型。

• TBitmap 元件型態中的 Property PixelFormat 指出 bitmap

影像中每一個位元的格式 (bit format of the bitmap

image) ，同時也指出影像該如何顯示，每個像素是如何儲存的。

25

位元圖元件型態 TBitmap ( 續 )

• Property PixelFormat 的資料型態為一列舉資料型態 (enum) ，列舉值集合為 {pfDevice, pf1bit, pf4bit, pf8bit,

pf15bit, pf16bit, pf24bit, pf32bit, pfCustom}

• 當 PixelFormat 值被設定成 pf24bit 時，表示共使用 24

位元來描述一個像素的色彩，藍、綠、紅色分別使用 1

個位元組，合計共 24 個位元。換句話說，位元深度為 24 。

26

位元圖元件型態 TBitmap ( 續 )

• TBitmap 元件屬性包含一個 Property ScanLine 的陣列資料。

• 透過存在 Property ScanLine 陣列中的記憶體指標就可以直接從記憶體中存取 TBitmap 影像元件的色彩值，這是最有效率的影像色彩值存取方式。

• ScanLine[j] 之中所存放的資料，就是指向第 j 橫列像素色彩資料的記憶體起始位址 。

27

像素格式 PixelFormat = pf24bit;

…

第 0 列 ScanLine[0]; …

…

…

…

第 0 列第 0 個像素色彩值

第 1 列 ScanLine[1];

第 j 列 ScanLine[ j ];

第 H-1 列 ScanLine[H-1];

第 0 列第 W-1 個像素色彩值

…

…

…

第 0 列第 1 個像素色彩值

第 0 列第 i 個像素色彩值

i*3+0i*3+1

i*3+2

…

……

……

……

…

…

…

…

0 1 2 3 4 5

影像高 H, 寬為 W 。