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

時間 2019-11-13

標籤完美實現相似頭像上傳功能 demo 源碼欄目騰訊简体版

原文原文鏈接

　　如今不少下載客戶端程序都須要設定本身頭像的功能，而設定頭像通常有兩種方式：使用攝像頭自拍頭像，或者選擇一個圖片的某部分區域做爲本身的頭像。spa

一.相關技術

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

（1）調用攝像頭，捕獲攝像頭採集的視頻，並將採集的視頻繪製到UI上。視頻

（2）從圖片文件讀取Image，並顯示在控件上（這個至關easy）。blog

（3）在顯示的視頻或圖片上，可以拖動一個正方形，以選擇指定部分的區域做爲本身的頭像。索引

（4）從視頻中截獲一幀保存爲圖片。事件

（5）從圖片中截取某個區域做爲本身的頭像。圖片

　　爲了解決這些問題，就須要涉及到的技術有DirectX Show、GDI+、drawdib（位圖繪製）、圖像截取等。資源

二.Demo實現

　　固然這篇文章不是要告訴你們這些技術的詳細細節，相關的資料網上有不少，若是須要從頭至尾本身實現，能夠從瞭解這些技術入手。在這裏，我將傲瑞通（OrayTalk）中的設定頭像的功能拆分出來作成一個demo，供你們參考和使用，避免你們浪費時間重複發明輪子。咱們先看看demo的運行效果。get

　　自拍頭像：源碼

　　上傳頭像：

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