完美實現類似QQ的自拍頭像、上傳頭像功能！（Demo 原始碼）

zhuweisky發表於2014-09-11
原始碼

　　現在很多下載客戶端程式都需要設定自己頭像的功能，而設定頭像一般有兩種方式：使用攝像頭自拍頭像，或者選擇一個圖片的某部分割槽域作為自己的頭像。

一.相關技術

　　若要實現上述的自拍頭像和上傳頭像的功能，會碰到以下要解決的問題：

（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內部會自動縮放並適應。 

三.原始碼下載

　　 自拍頭像Demo（原始碼）

 　　原始碼就不貼出來了，大家下載自己看吧：）

　　

　　 如果覺得這篇文章對你有幫助，請頂一下，並粉我啊，嘿嘿

 

相關文章