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

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

一.相关技术

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

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

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

  

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

时间: 2024-11-07 06:19:41

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

web实现QQ头像上传截取功能

由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传的图片,在change事件中用form.jquery.js中的formajax异步提交表单,保存上传的图片 2:绑定cooper事件,对图片进行选取. 3:得到选中区域的坐标,对图片进行截取保存. 其中的难点是ie的兼容性问题,由于本人也不是很好,就不献丑了下面给大家附上代码 页面中的html <d

Yii2.0 集成使用富头像上传编辑器

在开发过程中,我们会用到头像上传的功能.这里给大家推荐一款比较流行的头像上传组件,FullAvatarEditor 2.3(富头像上传编辑器). 实际效果如图所示: 1.下载组件,下载地址:http://www.fullavatareditor.com/download.html: 2.在所需页面上导入相关js文件: <script type="text/javascript" src="FullAvatarEditor2.3/scripts/swfobject.js&

实现类似QQ自拍头像的功能(demo源码)

在很多软件系统中,都允许用户设置自己的头像,甚至可以直接使用摄像头照相作为自己的头像,就像QQ的自拍头像功能一样. 这种功能是如何实现的了?最直接的,我们可以使用Windows提供的VFW技术或DirectX技术来捕获摄像头采集到的视频和图片.但是,无论使用这两种技术中的哪一个,要实现一个兼容所有摄像头而又运行稳定的拍照功能,都不是那么容易.幸运的是,OMCS已经内置集成了这种功能的一个WinForm控件PhotoPanel,我们可以直接拿来使用. PhotoPanel控件的主要接口如下图所示:

Android 仿qq上传头像(一)

       转载请注明出处http://blog.csdn.net/u014163726/article/details/44994197        这么长时间没写博客感觉手都要生了啊,最近因为工作的关系来到了上海,目前还算稳定,所以抓紧时间写篇博客压压惊.      标题早已经看穿一切,这次我们来模仿一下qq上传头像的功能,先上一个未完成版的效果图,银魂第四季重开放上一张萌萌哒的图片.          这还是要用到我们自定义View的知识,首先从相册中获取图片的部分我就不详细介绍了.

qt实现头像上传功能

想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片文章,QT实现的类似QQ的头像选择框,这篇文章也是讲解头像上传功能的,而我自己的代码是从这个demo中优化而来,不仅对代码进行了重构,而且处理了快速拖动时,边框消失的问题.使用事件和双缓冲来尽量减少重新绘制的几率.接下里我会一步一步进行讲解,怎么实现图片自定义截取功能.一.概要首选,我给出4个类,并

【转】可在广域网部署运行的QQ高仿版 -- GG叽叽V2.0,增加网盘和远程磁盘功能(源码)

尽力2~3周发布一个版本,我这次也没有失言.这段时间内,我仿照QQ的微云功能,在GG中增加了网盘的功能,而且,我还自创了一个QQ没有的新的功能:远程磁盘.正如远程桌面一样,远程磁盘允许我们像访问本地磁盘一样来访问在线的其它用户的磁盘. 一.GG V2.0 新增功能展现 (1)网盘:在服务端为每个用户分配一个网盘,用户通过客户端可以访问自己的网盘.就像QQ的微云一样. (2)远程磁盘:任何一个在线用户,都可以访问其它在线用户的磁盘(先要经过对方的同意). (3)无论是网盘.还是远程磁盘,都支持:上

【转】可在广域网部署运行的QQ高仿版 -- GG叽叽V2.4,增加远程协助、桌面共享功能(源码)

QQ的远程协助.或者说桌面共享是一个非常实用的功能,所以,2.4版本的GG复制了它,而且,GG增强了桌面共享的功能,它可以允许指定要共享桌面的区域,这样,对方就只能看到指定区域的桌面,这对节省流量会非常有帮助. GG实现这些功能的过程并不是那么简单,因为内部业务逻辑的关联容易把人搞晕.从运行起来的程序来说,远程协助的场景很容易理解:一方是请求方,一方是协助方,边界非常清晰.但是在程序中,无论是哪一方,其对应的窗体都是ChatForm,所以,在编码时,你经常需要切换你的思维:一会要站在请求方的角度

PHP+ajaxfileupload与jcrop插件结合 完成头像上传

昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传.这个地方我本来想做个上传进度的效果,但技术有限失败了.上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 getFileSize函数是用于判断文件大小的函数 function getFileSize(fileName) { var byteSize = 0; //console.log($("#" + fil

总结今天项目上传头像中遇到的问题

由于公司需要,在做项目的时候,涉及到上传头像的部分,在php中,上传图片是一种很简单的事情.但是需要实现仿QQ,新浪需要对图片截取图片,就不那么容易,我采取的是canvas获取getDataURL,然后将数据通过ajax发送到后台服务器并保存到数据库中再通过img的src属性进行读取数据库中的数据,在展现出来,但是因为项目中有留言板,这里会出现一个问题,就是图片保存为base64数据虽然可以减小一次http请求但是重要的事情说三遍,只对于小图片可以,将大图片的getDataURL存取在数据库中,