完美實現類似QQ的自拍頭像、上傳頭像功能!(Demo 原始碼)
現在很多下載客戶端程式都需要設定自己頭像的功能,而設定頭像一般有兩種方式:使用攝像頭自拍頭像,或者選擇一個圖片的某部分割槽域作為自己的頭像。
一.相關技術
若要實現上述的自拍頭像和上傳頭像的功能,會碰到以下要解決的問題:
(1)呼叫攝像頭,捕獲攝像頭採集的視訊,並將採集的視訊繪製到UI上。
(2)從圖片檔案讀取Image,並顯示在控制元件上(這個相當easy)。
(3)在顯示的視訊或圖片上,能夠拖動一個正方形,以選擇指定部分的區域作為自己的頭像。
(4)從視訊中截獲一幀儲存為圖片。
(5)從圖片中擷取某個區域作為自己的頭像。
為了解決這些問題,就需要涉及到的技術有DirectX Show、GDI+、drawdib(點陣圖繪製)、影象擷取等。
二.Demo實現
當然這篇文章不是要告訴大家這些技術的詳細細節,相關的資料網上有很多,如果需要從頭到尾自己實現,可以從瞭解這些技術入手。在這裡,我將傲瑞通(OrayTalk)中的設定頭像的功能拆分出來做成一個demo,供大家參考和使用,避免大家浪費時間重複發明輪子。我們先看看demo的執行效果。
自拍頭像:
上傳頭像:
在demo中,點選窗體上的確定按鈕,就會自動將所選擇區域的影象儲存為自己的頭像了。這是怎麼做到的了?實際上,我們是使用了OMCS提供的兩個控制元件:HeadImagePanel和ImagePartSelecter。
1.HeadImagePanel 控制元件
先看看HeadImagePanel控制元件的定義吧:
public class HeadImagePanel : UserControl { // 當選擇的頭像區域發生改變時,會觸發此事件。引數為頭像點陣圖。 public event CbGeneric<Bitmap> HeadImageSelected; // 獲取結果頭像。 public Bitmap GetHeadImage(); // 初始化攝像頭,並啟動它。 // cameraDeviceIndex:攝像頭的索引 // cameraSize: 攝像頭採集解析度 // outputImageLen: 輸出的正方形頭像的邊長 public void Start(int cameraDeviceIndex, Size cameraSize, int outputImageLen); // 停止攝像頭。 public void Stop(); }
(1)將HeadImagePanel拖到窗體上,然後呼叫其Start方法,它就會自動啟動攝像頭,並將捕捉的視訊繪製帶該控制元件的表面上,而且,同時會在視訊的上面繪製藍邊的正方形,我們可以通過拖動或改變這個正方形的大小,來指定選擇的區域。
(2)當區域指定好後,可以呼叫其GetHeadImage方法,其就會返回最終的結果影象(即指定區域內的視訊影象)。
(3)使用完畢後,呼叫HeadImagePanel的Stop方法以釋放攝像頭及相關的其它資源。
(4)要特別注意的是,請將HeadImagePanel控制元件的Size設定為與攝像頭採集解析度一樣的大小。否則,結果影象將是有偏差的。
2.ImagePartSelecter 控制元件
影象區域選擇控制元件ImagePartSelecter的定義如下:
public class ImagePartSelecter : UserControl { // 當選擇的區域發生改變時,會觸發此事件。事件引數為原始圖片的選擇區域截圖。 public event CbGeneric<Bitmap> ImagePartSelected; // 獲取結果圖片(原始圖片的選擇區域截圖)。 public Bitmap GetResultImage(); // 初始化。 // outputImgLen: 最終要輸出的正方形圖片的邊長。 public void Initialize(int outputImgLen); // 指定要被選取的圖片。 public void SetSourceImage(Image image); }
(1)將ImagePartSelecter控制元件拖到窗體上,呼叫Initialize方法初始化。
(2)呼叫SetSourceImage方法設定原始的頭像圖片,這樣,圖片會顯示在控制元件的表面,而且ImagePartSelecter會在影象的上面繪製藍邊的正方形,我們可以通過拖動或改變這個正方形的大小,來指定選擇的區域。
(3)當區域指定好後,可以呼叫其GetResultImage方法,其就會返回最終的結果影象(即指定區域內的影象)。
(4)與HeadImagePanel控制元件不一樣的是,不需要將ImagePartSelecter控制元件的Size設定為與圖片一樣的大小,ImagePartSelecter內部會自動縮放並適應。
三.原始碼下載
原始碼就不貼出來了,大家下載自己看吧:)