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

一.相关技术

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

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

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

  

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

转载于:https://www.cnblogs.com/sylone/p/6096724.html

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

  1. Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例)

    Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例) 标签: 注册登录Android开发servlet 2017-04-18 20:34  454人阅读  评论(1) ...

  2. 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能

    小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...

  3. vue 头像上传裁剪功能

    1,第一步安装vue-cropper cnpm install vue-cropper 2,在main.js引用 import VueCropper from 'vue-cropper'; Vue.u ...

  4. 小程序头像上传成功但是小程序码没更新

    微信小程序头像上传了,但是小程序码没更新怎么处理? 如图: 小程序头像上传成功,但是小程序码没更新,是不是让你怀疑人生? 其实不用怀疑,退出登录,重新登录就行了 重新登录后,就可以刷新出新的小程序码图 ...

  5. Android--利用Bmob实现头像上传下载功能

    声明: 本文使用Bmob作为云后台,实现一个简简单单的头像的选取.截取.上传.下载功能的实现. 编码环境:Android Studio2.1.1 运行环境:Miui8.6.8.18(安卓版本号6.0. ...

  6. springMVC+jcrop实现头像上传截图功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

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

    由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...

  8. jQuery点击头像上传头像图片并预览图片

    HTML代码 <div class="img_show img_show1">         <img src="img2/img06.jpg&quo ...

  9. vue 移动端头像裁剪_移动端 上传头像 并裁剪功能(h5)

    移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...

最新文章

  1. 岗位内推 | 字节跳动招聘NLP、计算机视觉、推荐算法实习生
  2. JQuery真的不难~第六回 JQ中的异步调用方式
  3. NAT网关之SNAT进阶使用(二)构建ECS级别SNAT出网方式
  4. python 切片步长_python切片步长
  5. Linux笔记-nohup和
  6. 汇编语言---GCC内联汇编
  7. springboot mysql事物_springboot如何开启数据库事务
  8. flask 加载配置文件
  9. 欧氏空间内积定义_泛函分析笔记3:内积空间
  10. 洛谷—— P1268 树的重量
  11. ros下各个包中的map的格式
  12. oracle中日期格式的注意事项
  13. java hevc和heif_什么是HEVC和HEIF?有什么优缺点?
  14. 架构师手册——图形化表达
  15. 比 Elasticsearch 更快 RediSearch + RedisJSON = 王炸
  16. 新一年级家长快查收,小学入学必备物品超强清单!
  17. Google Map API 使用总结
  18. springboot 银联支付(快捷支付)
  19. 已知中序、后序,求先序
  20. Python获取文件的行数和某一行的内容

热门文章

  1. (转)支持Dubbo生态发展,阿里巴巴启动新的开源项目 Nacos
  2. 三角函数和复指数函数的转化_三角函数与复数
  3. wordpress python 采集_Python3利用Selenium3模拟wordpress博客登陆
  4. python --面向对象
  5. vue下拉框传值问题
  6. python执行shellcode_python exec shellcode
  7. Maven命令安装本地jar包到本地仓库
  8. URL报错: unknown protocol
  9. JAVA如何分段_OpenCV Java文本分段
  10. linux裸设备大小,SUSE Linux 十 配置裸设备(raw devices)