开发者社区> zhuweisky> 正文

完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)

简介:   现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像。 一.相关技术   若要实现上述的自拍头像和上传头像的功能,会碰到以下要解决的问题: (1)调用摄像头,捕获摄像头采集的视频,并将采集的视频绘制到UI上。
+关注继续查看

  现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像。

一.相关技术

  若要实现上述的自拍头像和上传头像的功能,会碰到以下要解决的问题:

(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(源码)

   源码就不贴出来了,大家下载自己看吧:)

  

   如果觉得这篇文章对你有帮助,请顶一下,并粉我啊,嘿嘿

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Objective-c下具有下载功能的NSURLCache类CustomURLCache
最近在做iOS APP开发的过程中遇到了这么一个问题:我开发的是一个阅读类的App,正文界面是通过UIWebViewController来实现的,现在要实现文章离线阅读功能。即将当前web页面所有的资源请求结果都下载都本地。在网上找了很多方法,发现都不是很好。后来还是决定从cache入手:iOS自带的NSURLCache并不支持将cache下载到自定义的目录底下,所以只有复写NSURL
1102 0
ActiveReports 9 新功能:借助目录(TOC)控件为报表添加目录功能
原文:ActiveReports 9 新功能:借助目录(TOC)控件为报表添加目录功能 在最新发布的ActiveReports 9报表控件中添加了多项新功能,以帮助你在更短的时间里创建外观绚丽、功能强大的报表系统,本文将重点介绍新增文档目录控件(TOC),通过拖拽操作便可添加报表目录。
1043 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18714 0
asp.net mvc上传头像加剪裁功能
原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用。 我不能告诉你们其实是从博客园扒的前台代码,哈哈。 前端是jquery+fineuploader+jquery.
1116 0
【TarsosDSP】TarsosDSP 简介 ( TarsosDSP 功能 | 相关链接 | 源码和相关资源收集 | TarsosDSP 示例应用 | TarsosDSP 源码路径解析 )(二)
【TarsosDSP】TarsosDSP 简介 ( TarsosDSP 功能 | 相关链接 | 源码和相关资源收集 | TarsosDSP 示例应用 | TarsosDSP 源码路径解析 )(二)
40 0
【TarsosDSP】TarsosDSP 简介 ( TarsosDSP 功能 | 相关链接 | 源码和相关资源收集 | TarsosDSP 示例应用 | TarsosDSP 源码路径解析 )(一)
【TarsosDSP】TarsosDSP 简介 ( TarsosDSP 功能 | 相关链接 | 源码和相关资源收集 | TarsosDSP 示例应用 | TarsosDSP 源码路径解析 )(一)
80 0
+关注
zhuweisky
从事软件开发行业十多年,专注于网络通信技术和网络语音视频技术,擅长系统架构设计、系统性能优化等。zhuweisky.cnblogs.com
300
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载