python h5游戏_从零开始制作H5人脸融合小游戏
去年的建军节,一个展示军装照的H5人脸融合游戏火遍朋友圈,带来很好的传播效果。最近欧冠决赛要来了,公司决定做一个寻找和你最像的欧冠球星的H5游戏,那么该怎么做呢?认真分析了一下,这个游戏其实用到的技术还是挺多的,是一个比较综合的项目。主要用到技术如下:
人脸识别
Python web和Java web
域名解析和nginx
微信JS
H5页面
人脸识别
人脸识别的API各大平台都有提供,百度,阿里,优图(腾讯),Face++. 各家的API大体相似,主要区别只是取的点的个数和返回结果的数据结构,都可用。BAT的都有免费可用(如果对QPS没有过高要求的话),Face++ 需要收费1元/次(墙裂怀疑失了智)。综合比较之后选择使用优图。
http://open.youtu.qq.com/#/develop/api-face-analysis-detect
SDK下载
http://open.youtu.qq.com/#/develop/tool-sdk
后端采用python,所以下载python版本的SDK。
youtu配置
从优图获取的人脸识别之后的信息全部是面部点的信息,需要进行处理,具体的处理方法全部在
https://github.com/tonyiweb/face_merge_master (star,fork来一套?)
感兴趣的star,fork一下
人脸融合大师,可以满足你10分钟做出人脸融合功能的理想工具,你值得拥有。
Python web和Java web
基于性能和表现的考虑,做了一个分离。图片识别和融合的功能全部放在一个Python web项目中,作为一个api,然后在Java web项目中调用这个API,将返回的结果或者错误信息返回到H5页面。
Python web
python是一个能快速开发的语言,有很多易用的web框架可以使用,这里就选择Tornado这个框架。
Tornado使用
服务器上通过nohup python -u run.py& 就可以启动一个端口号为9010(代码中可以指定,一般在7000以后)的服务。 nohup可以保证服务长期后台运行,并且可以通过tail -f nohup.out来查看日志。服务可以通过ps -ef|grep python查询服务的pid,再通过kill -9 pid来停止。
Java web
采用SpringBoot搭建的微服务,没有任何界面。接受H5页面传过来的图片,去调用人脸融合的API,根据结果返回调用结果或者错误信息。
API返回结果
域名解析和nginx
域名解析的过程其实就是一个通过名字(相对好记一些)找IP地址(相对难以记忆)的过程,而IP地址又对应一台服务器,也就是通过名字定位服务器。在控制台的域名解析中新加一条记录,指向代码部署的服务器。
因为一台服务器上其实是部署多个服务,也会被多个域名所指向,所以其实还需要一个东西来指引服务所要对应的域名,这个东西就是nginx。 一个服务一般是要对应一个端口的,nginx可以监听一个端口,然后将这个端口的服务定向到某个域名。
仅支持https
既支持http也支持https
注意:1,https服务需要安全证书,可以在阿里云的安全中的CA证书服务中购买(有免费的Symantic的证书)
2,一般默认的是http的,如果没有必要可以不用带安全证书的https服务
3,通过whereis nginx命令查找nginx的位置,通过vhost统一管理nginx配置文件
4,配置完nginx之后,需要重启nginx服务,命令: ./nginx -s reload 如果没有错误,就说明已经重启了。
微信JS
1,配置微信。需要在后台根据jsapi_ticket等信息生成签名
(1)前台
//这里的url为当前页面的路径,为了使得分享之后的链接也是可用
var url = window.location.href;
$.get(baseUrl+"/common/get_wx_config",{url:url},
function(data){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,
jsApiList: ['checkJsApi','chooseImage','uploadImage','onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] // 必填,需要使用的JS接口列表
});
setShareInfo('','');
})
(2)后台,微信签名过程
微信签名过程
2,拍照或者从相册中选择照片
var serverId='0';
function getPic(){
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
if(res.checkResult.chooseImage){
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
$("#selfImg").attr("src",localIds);
wx.uploadImage({
localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
serverId = res.serverId; // 返回图片的服务器端ID
$("#nextBtn").css("display","block");
}
});
}
});
}else{
showAlert("微信版本过低,无法使用相机和相册功能","fail");
}
}
});
}
3,上传图片并获得人脸融合结果
(1)前台
if(serverId!='0'){
if(gender==1){
showAlert("正在玩命给小主儿寻找最像你的球星...","loading");
}else{
showAlert("正在玩命给小主儿寻找最像你的球星太太...","loading");
}
//在服务器端下载图片,并作人脸融合,返回融合后的结果给img的src
$.get(baseUrl+"/common/download_image",{serverId:serverId,gender:gender},
function(data){
if(data.status=='success'){
hideAlert();
$("#loadingPage").css("display","none");
$("#firstPage").css("display","none");
$("#secondPage").css("display","none");
$("#thirdPage").css("display","block");
var imageData = JSON.parse(data.data);
$("#resultName").html(imageData.modelShortName);
if(gender==1){
$("#discriptionText").html(imageData.description+',要被你迷倒啦(^_-');
setShareInfo(imageData.imageUrl[2],'和我最像的欧冠球星是'+imageData.modelShortName+','+imageData.description)
}else{
$("#discriptionText").html(imageData.modelName+','+imageData.description+',要被你迷倒啦(^_-');
setShareInfo(imageData.imageUrl[2],'和我最像的欧冠女神是'+imageData.modelShortName+','+imageData.description)
}
$('#firstResultImg').animateCss('fadeIn', function() {
$("#firstResultImg").attr("src",imageData.imageUrl[0]);
$("#firstResultImg").addClass('animated flash');
$("#secondResultImg").animateCss('fadeIn',function(){
$("#secondResultImg").attr("src",imageData.imageUrl[1]);
$("#secondResultImg").addClass('animated flash');
$("#thirdResultImg").animateCss('fadeIn',function(){
$("#thirdResultImg").attr("src",imageData.imageUrl[2]);
$("#thirdResultImg").addClass('animated flash');
$("#fourthResultImg").animateCss('fadeIn',function(){
$("#fourthResultImg").attr("src",imageData.imageUrl[3]);
$("#fourthResultImg").addClass('animated flash');
$("#resultName").addClass('animated bounceIn');
});
});
});
});
}else{
if(gender==1){
showAlert("好遗憾,没有找到和你相像的球星呢...换张照片,再玩一次吧","fail");
}else{
showAlert("好遗憾,没有找到和你相像的球星太太呢...换张照片,再玩一次吧","fail");
}
}
})
}else{
showAlert("好遗憾,你还没有上传任何照片哦...","fail");
}
(2)后台,上传照片并进行人脸融合
上传照片并进行人脸融合
注意:需要在真机上才可以调用相机和相册
注意:要使用的域名必须在公众号设置——>功能设置中添加
H5页面
页面的大半是要依赖UI设计师,下面放些设计图,实现过程就省略掉(假装不重要.)...
启动页
性别选择页
上传照片页
结果页
注意:H5页面的难点其实是在于兼容,这里通过计算设备宽度,得到相对尺寸rem,然后给元素设置以rem为单位的位置尺寸等信息,做到全部兼容ios移动设备和大部分Android设备
注意:页面中使用到了Animate.css这个CSS动画框架,链接:http://blog.superwr.top/2018/%E5%8A%A8%E7%94%BB%E6%8F%92%E4%BB%B6animate-css%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/
python h5游戏_从零开始制作H5人脸融合小游戏相关推荐
- python编辑简单小游戏大全_Python制作简单的滑雪小游戏
开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块.关注公众号:Python学习指南,回复"滑雪"获取源码 环境搭建 安装Pyt ...
- 用记事本编写小游戏_记事本3分钟编写放置小游戏(v0.4 土豪情趣屋与大型灵石盾构)...
------------------------- v0.4新增问山村的土豪情趣屋(大量生产人口),新增灵石盾构(提升灵石产量)! ------------------------- 说明: 本教程无 ...
- python设计2048小游戏_使用graphics.py实现2048小游戏
1.过年的时候在手机上下载了2048玩了几天,心血来潮决定用py写一个,刚开始的时候想用QT实现,发现依赖有点大.正好看到graphics.py是基于tkinter做的封装就拿来练手,并借用了CSDN ...
- java小恐龙游戏_【分享】 chrome恐龙小游戏 java
本帖最后由 leiyanfu 于 2019-5-3 14:27 编辑 最近学习java也有一段时间了 前些天打开网站老是出出现小恐龙所以就萌生了想模仿着写一个 无奈一些东西我还没学到 比如java的窗 ...
- 利用微信小程序(小游戏)API制作适配cocos creator小游戏排行榜的实例程序
cocos creator 可以通过新建一个creator项目进行添加子域项目,但是有一个缺点就是占用文件大小是一个问题,所以我这里采用微信的API进行绘制排行榜, 主域就是各种发送给子域的消息,这里 ...
- 用java写2468游戏_关于第一次用java写小游戏(贪吃蛇)的体会记录
作为一只菜鸡,对于编程的世界还一无所知,但是感觉应该要写点实用的东西.突然发现好像贪吃蛇应该能写出来(那种几乎没有用户界面的),于是就开始了. 1.关于对简单的动画呈现的资料准备 因为只有一些捉襟见肘 ...
- java火柴游戏_求一个“JAVA拿火柴小游戏”的程序要求如下!!!!!!!跪求!!!!!...
展开全部 按照题目要求,人拿完火柴后计62616964757a686964616fe58685e5aeb931333332643930算机自动拿火柴,判断胜利者.鼠标点击ok或者键盘按enter键即可 ...
- java eclipse游戏_急需基于eclipse的JAVA小游戏源代码!!!
展开全部 单人版五子棋,不用导入,直接新建一个mywindow类就行,然后把一下代码粘贴就Ok了.或者,直接用dos就可以了.. --------------------- import java.a ...
- 50行python游戏代码_使用50行Python代码从零开始实现一个AI平衡小游戏
使用50行Python代码从零开始实现一个AI平衡小游戏 发布时间:2020-10-23 09:26:14 来源:脚本之家 阅读:74 集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何 ...
最新文章
- Eclipse新建Work set管理工程
- 互联网和嵌入式哪个卷?
- C. Orac and LCM(数论lcm, gcd)
- CSS 小结笔记之滑动门技术
- OSPFv3报文中Option字段变化简介
- 如何修复最常见的 macOS 11 Big Sur 问题?
- python 生成wifi密码字典_python生成密码字典的方法
- 计算机组成原理与体系结构知识概括
- 深入理解Servlet原理
- gom及gee小白架设黑屏的原因以及个别装备地图不显示怎么办?
- 我的电脑里顽固图标删除解决
- 如何批量修改图片名称?
- 含有使字的诗句_古诗含“把”字
- 广度优先搜索BFS-P3456 [POI2007]GRZ-Ridges and Valleys
- 云服务器的购买及搭建
- cublas_学习笔记2
- 费纸箱手工制作机器人_如何DIY用纸盒制作机器人方法图解
- DMSP/OLS夜间灯光数据——应用
- 虚拟化KVM技术详解
- 《脱颖而出——成功网店经营之道》一2.2 进货攻略