Perfect to achieve similar QQ selfie head, upload avatar Function! (Demo Source)

Now many download client programs need to set their own avatar features, and set the avatar generally have two ways: Use the camera selfie head, or select a part of the picture area as your avatar.

I. Related Technologies

To achieve the above self-portrait and upload avatar features, you will encounter the following issues to solve:

(1) Call the camera, capture the video captured by the camera, and draw the captured video to the UI.

(2) Read the image from the picture file and display it on the control (this is quite easy).

(3) on the displayed video or picture, you can drag a square to select the area of the specified section as your avatar.

(4) capture a frame from the video and save it as a picture.

(5) Capture an area from the image as your avatar.

In order to solve these problems, it is necessary to involve DirectX Show, GDI +, Drawdib (bitmap drawing), image interception, etc.

Two. Demo implementation

Of course, this article is not to tell you the details of these technologies, the relevant information online there are many, if you need to achieve from start to finish, you can learn from these technologies. Here, I will be proud of Rui Tong (oraytalk) in the setting of the Avatar function split out to make a demo, for everyone to reference and use, to avoid wasting time to reinvent the wheel. Let's see how the demo works.

Selfie head:

Upload Avatar:

In the demo, clicking the OK button on the form will automatically save the image of the selected area as your avatar. How did this happen? In fact, we are using the two controls provided by OMCS : Headimagepanel and Imagepartselecter.

1.HeadImagePanel controls

Let's look at the definition of the Headimagepanel control:

    public class Headimagepanel:usercontrol    {  
        This event is triggered when the selected avatar area changes. The parameter is the Avatar bitmap. Public        event cbgeneric<bitmap> headimageselected;
        Gets the result avatar. Public        Bitmap getheadimage ();
        Initialize the camera and start it.             
   Cameradeviceindex: Camera's index        //   Camerasize: Camera Acquisition resolution        //   Outputimagelen: The side length of the output square avatar Public        void Start (int cameradeviceindex, Size camerasize, int outputimagelen);

       Stop the camera. Public        void Stop ();    

(1) Drag the Headimagepanel onto the form, then call its Start method, it will automatically start the camera, and the captured video will be drawn with the surface of the control, and at the same time the video will be drawn on the blue edge of the square, we can drag or change the size of the square, To specify the selected region.

(2) When the region is specified, it can call its Getheadimage method, which returns the final result image (that is, the video image in the specified area).

(3) After use, call the Headimagepanel stop method to release the camera and other related resources.

(4) To be particularly careful, set the size of the Headimagepanel control to be as large as the camera acquisition resolution. Otherwise, the resulting image will be biased.

2.ImagePartSelecter controls

The image area selection control imagepartselecter is defined as follows:

    public class Imagepartselecter:usercontrol    {       
　　     This event is triggered when the selected region has changed. The event argument is the selection area of the original picture. Public        event cbgeneric<bitmap> imagepartselected;        
　　
Gets the result picture (the selection area of the original picture). Public        Bitmap getresultimage ();
       Initialization             
       Outputimglen: The edge length of the square picture to be output eventually. Public        void Initialize (int outputimglen);
       Specifies the picture to be selected. Public        void Setsourceimage (image image);    

(1) Drag the Imagepartselecter control onto the form and call the Initialize method to initialize.

(2) Call the Setsourceimage method to set the original avatar picture so that the picture will be displayed on the control's surface, and Imagepartselecter will draw a blue-edged square on top of the image, and we can specify the selected area by dragging or changing the size of the square.

(3) When the region is specified, it can call its Getresultimage method, which returns the final result image (that is, the image within the specified area).

(4) Unlike the Headimagepanel control, you do not need to set the size of the Imagepartselecter control to be as large as the picture, and the Imagepartselecter internally automatically scales and adapts.

Three. Source code download

　　Selfie Head demo (source code)

The source code will not be posted out, you download yourself to see it:)

　　

If you think this article is helpful to you, please top it, and powder me ah, hey

Perfect to achieve similar QQ selfie head, upload avatar Function! (Demo Source)