完美實現類似QQ的自拍頭像、上傳頭像功能！（Demo 源碼） - zhuweisky－IT工程師數位筆記本

文章出處

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

一.相關技術

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

（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);
    }