The QQ-like selfie Avatar and upload Avatar function are perfectly realized! (Demo source code)

Currently, many download client programs need to set their own avatar, and there are two ways to set the Avatar: use the camera to take a selfie, or select a part of the image as your avatar.

I. Related Technologies

If you want to implement the above self-timer Avatar and upload Avatar functions, you will encounter the following problems:

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

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

(3) You can drag a square on the displayed video or image to select the area of the specified part as your avatar.

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

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

To solve these problems, the technologies involved include DirectX show, GDI +, drawdib (Bitmap rendering), and image capturing.

Ii. Demo implementation

Of course, this article is not intended to tell you the detailed details of these technologies. There are a lot of relevant information on the Internet. If you need to implement it from the beginning to the end, you can start by learning about these technologies. Here, I split the Avatar setting function in oraytalk into a demo for your reference and use, so as to avoid wasting time and repeating the wheel of invention. Let's first look at the running effect of the demo.

Selfie Avatar:

Upload Avatar:

In the demo, click the OK button on the form to automatically save the image of the selected area as your avatar. How did this happen? In fact, we use two controls provided by omcs: headimagepanel and imagepartselecter.

1. headimagepanel Control

Let's take a 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 an avatar bitmap. Public event cbgeneric <bitmap> headimageselected;
// Obtain the result avatar. Public bitmap getheadimage ();
// Initialize the camera and start it.
// Cameradeviceindex: Camera index // camerasize: camera acquisition resolution // outputimagelen: Public void start (INT cameradeviceindex, size camerasize, int outputimagelen );

// Stop the camera. Public void stop ();}

(1) drag headimagepanel to the form and call its start method. The camera is automatically started and the captured video is drawn on the surface of the control, at the same time, we will draw a square with a blue edge on the video. We can drag or change the size of this square to specify the selected area.

(2) After a region is specified, you can call its getheadimage method to return the final result image (that is, the video image in the specified region ).

(3) Call the headimagepanel stop method to release the camera and other related resources.

(4) Please set the size of the headimagepanel control to the same size as the camera's collection resolution. Otherwise, the result image is biased.

2. imagepartselecter Control

The imagepartselecter control is defined as follows:

Public class imagepartselecter: usercontrol {
// This event is triggered when the selected region changes. The event parameter is the selected area of the original image. Public event cbgeneric <bitmap> imagepartselected;
　　
// Obtain the result image (select the original image area ). Public bitmap getresultimage ();
// Initialization.
// Outputimglen: The side length of the final square image to be output. Public void initialize (INT outputimglen );
// Specify the image to be selected. Public void setsourceimage (image );}

(1) drag the imagepartselecter control to the form and call the initialize method for initialization.

(2) Call the setsourceimage method to set the original Avatar image. In this way, the image will be displayed on the control surface, and imagepartselecter will draw a square with a blue edge on the image, we can drag or change the size of this square to specify the selected area.

(3) when the region is specified, you can call its getresultimage method to return the final result image (that is, the image in the specified region ).

(4) Unlike the headimagepanel control, you do not need to set the size of the imagepartselecter control to the same size as the image. The imagepartselecter automatically scales and adapts to it.

3. Download source code

Selfie Avatar demo (source code)

The source code will not be posted. You can download it for yourself :)

　　

If you think this article is helpful to you, please stick it up and try again, hey

 

The QQ-like selfie Avatar and upload Avatar function are perfectly realized! (Demo source code)