1. 程式人生 > >完美實現類似QQ的自拍頭像、上傳頭像功能!(Demo 原始碼)

完美實現類似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內部會自動縮放並適應。 

三.原始碼下載

   原始碼就不貼出來了,大家下載自己看吧:)