完美实现类似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(源码)
源码就不贴出来了,大家下载自己看吧:)
如果觉得这篇文章对你有帮助,请顶一下,并粉我啊,嘿嘿
转载于:https://www.cnblogs.com/sylone/p/6096724.html
完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)相关推荐
- Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例)
Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例) 标签: 注册登录Android开发servlet 2017-04-18 20:34 454人阅读 评论(1) ...
- 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...
- vue 头像上传裁剪功能
1,第一步安装vue-cropper cnpm install vue-cropper 2,在main.js引用 import VueCropper from 'vue-cropper'; Vue.u ...
- 小程序头像上传成功但是小程序码没更新
微信小程序头像上传了,但是小程序码没更新怎么处理? 如图: 小程序头像上传成功,但是小程序码没更新,是不是让你怀疑人生? 其实不用怀疑,退出登录,重新登录就行了 重新登录后,就可以刷新出新的小程序码图 ...
- Android--利用Bmob实现头像上传下载功能
声明: 本文使用Bmob作为云后台,实现一个简简单单的头像的选取.截取.上传.下载功能的实现. 编码环境:Android Studio2.1.1 运行环境:Miui8.6.8.18(安卓版本号6.0. ...
- springMVC+jcrop实现头像上传截图功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- web实现QQ头像上传截取功能
由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...
- jQuery点击头像上传头像图片并预览图片
HTML代码 <div class="img_show img_show1"> <img src="img2/img06.jpg&quo ...
- vue 移动端头像裁剪_移动端 上传头像 并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
最新文章
- 岗位内推 | 字节跳动招聘NLP、计算机视觉、推荐算法实习生
- JQuery真的不难~第六回 JQ中的异步调用方式
- NAT网关之SNAT进阶使用(二)构建ECS级别SNAT出网方式
- python 切片步长_python切片步长
- Linux笔记-nohup和
- 汇编语言---GCC内联汇编
- springboot mysql事物_springboot如何开启数据库事务
- flask 加载配置文件
- 欧氏空间内积定义_泛函分析笔记3:内积空间
- 洛谷—— P1268 树的重量
- ros下各个包中的map的格式
- oracle中日期格式的注意事项
- java hevc和heif_什么是HEVC和HEIF?有什么优缺点?
- 架构师手册——图形化表达
- 比 Elasticsearch 更快 RediSearch + RedisJSON = 王炸
- 新一年级家长快查收,小学入学必备物品超强清单!
- Google Map API 使用总结
- springboot 银联支付(快捷支付)
- 已知中序、后序,求先序
- Python获取文件的行数和某一行的内容
热门文章
- (转)支持Dubbo生态发展,阿里巴巴启动新的开源项目 Nacos
- 三角函数和复指数函数的转化_三角函数与复数
- wordpress python 采集_Python3利用Selenium3模拟wordpress博客登陆
- python --面向对象
- vue下拉框传值问题
- python执行shellcode_python exec shellcode
- Maven命令安装本地jar包到本地仓库
- URL报错: unknown protocol
- JAVA如何分段_OpenCV Java文本分段
- linux裸设备大小,SUSE Linux 十 配置裸设备(raw devices)