专栏首页算法与编程之美开发|微信小程序与tensorflow.js模型引入

开发|微信小程序与tensorflow.js模型引入

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

1)创建camera对象和canvas对象

用小程序实现人物的姿态检测功能

Camera对象实时获取图像,传送给后台模型处理,处理完的结果在canvas对象内显示

1.添加camera

2.调整camera为全屏

3.在<camera>…</camera>中添加canvas对象

进入下图目录,如果<view>内有默认填充的代码可以清理掉

创建camera对象,并添加一些属性,如后置摄像头、关闭闪光灯、相关报错、样式:全屏。

进入index.wxss页面,同样的先将无关内容删除。

添加样式,发现已经设置过样式(小程序初始化的样式)。

进入app.wxss页面,将padding后的值修改为0,然后保存。如果出现提示点Ok就行。

然后就可以在模拟器上,看到自己的头像出现(手动打码)

进入index.js页面,来添加一些代码,使得我们能获取camera得到的一帧一帧的图片。

进入index.wxml页面添加canvas对象

回到index.js页面,添加红线部分代码,传入canvas对象

2)接下来就是引入模型,进入下面的网址,直接调用谷歌提供的模型作为案例。

https://tensorflow.google.cn/

点击学习-->针对javascript-->查看模型

以PoseNet模型为例,该模型能够对人物的姿态进行检测

可以点击进入github页面,查看该模型的一些介绍和用法。

进入PowerShell(管理员)指令界面,进入到项目目录下开始安装该模型。

npm install @tensorflow-models/posenet

安装之后,返回小程序项目重新点击构建npm

回到index.js页面,导入模型,没报错就证明导入成功。

3)这里有个问题需要注意,一些模型可能比较大,加载较慢,所以一般采用异步加载,但小程序不支持异步加载,要再安装一个库。回到PowerShell(管理员)指令界面,输入:

npm install regenerator-runtime

之后回到小程序项目做一些修改,点击右上角详情-->本地设置-->取消es6转es5,如果’使用npm模块’没勾选的,现在勾选上

修改代码部分就不累赘了,一些说明直接注释在代码旁边。将index.js内的所有代码替换为下方的代码。

const posenet=require('@tensorflow-models/posenet')//模型的下载命名const regeneratorRuntime=require('regenerator-runtime')//异步加载库的下载命令//index.jsPage({ //async 异步加载 ,onLoad是在加载时触发可能会造成卡顿,改为onReady加载完毕后触发 async onReady() { const camera = wx.createCameraContext(this)//调用接口 this.convas = wx.createCanvasContext("pose", this) this.net=await posenet.load({ architecture: 'MobileNetV1', //模型架构 outputStride: 16, //cnn中的stride参数 inputResolution: 193, //输入形状 multiplier: 0.5 //层数 })//加载模型,配置参数,详细的参数说明可以查看那个模型的github页面下的说明 //console.log(this.net) //该行代码用于检测模型是否加载成功 let count=0 const listener=camera.onCameraFrame((frame) => { count++ if(count===4){ //console.log(frame) count=0 } })//监听器,每帧刷新时都会把监听器得到的信息通过fram传给我们.这里设置了每隔4帧 listener.start() }})

碰上不合法域名问题,是因为模型的下载不是在本地而是从google的网址上下载的,微信小程序为了保障安全,涉及到新的域名都要在个人的微信小程序页面添加。

回到微信小程序官网,登录自己的账号,操作如下图

根据报错,把相应网址添加到request里,保存提交即可

如果无法提交,提示域名未经过ICP备案,在详情里勾选不检测域名。这样就能在测试的时候访问该域名,如果要发布正式的微信小程序就得将模型放在已经备案的域名上。

最后点击保存,在控制台能够查看模型信息即表示模型加载成功。

END

实习编辑 | 王文星

责 编 | 马原涛

where2go 团队


微信号:算法与编程之美

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:马原涛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 计算机图形|RGB与HSV模型的转化

    RGB模型是目前常用的一种彩色信息表达方式,它使用红、绿、蓝三原色的亮度来定量表示颜色。

    算法与编程之美
  • Python|Tkinter实现一个简单的GUI界面

    Tkinter是python自带的一个可以编程的GUI,能将python代码封装成一个GUI;当然,Tkinter可以更好的为使用者带来视觉上的效果,可以将单调...

    算法与编程之美
  • 微信小程序|配置文本框样式、排版及点击页面跳转

    我们在使用一个小程序时,总是会看到页面给出你不同的选择文本框,而你需要单击文本框跳转到你需要了解的内容页面中去。因此,如何美化这些文本框以及如何配置页面跳转是我...

    算法与编程之美
  • Quick-Task 动态脚本支持框架之Groovy脚本加载执行

    上一篇简答说了如何判断有任务动态添加、删除或更新,归于一点就是监听文件的变化,判断目录下的Groovy文件是否有新增删除和改变,从而判定是否有任务的变更;

    一灰灰blog
  • 深入分析Java反射(五)-类实例化和类加载

    其实在前面写过的《深入分析Java反射(一)-核心类库和方法》已经介绍过通过类名或者java.lang.Class实例去实例化一个对象,在《浅析Java中的资源...

    Throwable
  • 如何加载一张超大高清图

    "大图片加载容易做,可是这个需求要保证在不OOM的情况下能放大查看,还要能清晰展示,这得怎么呢?",愁眉苦脸的小呼说到。

    PhoenixZheng
  • 遭JBoss漏洞破坏,23000台服务器“中招”

    十月初,安全研究员Andrea MIcalizzi在多家厂商(包括惠普,McAfee,赛门铁克和IBM)使用4.X和5.X JBoss的产品中发现了一个漏洞并将...

    安恒信息
  • 27-逐步实现列表解析

    凯茜的老爸
  • 3D人体模型减面案例分享

    之前我分享过使用Invesalius工具生成人体模型3D表面轮廓案例,接下来需要借助一些三维建模工具将轮廓进行实体化。三维建模工具有很多种,我使用的是3ds...

    用户7498388
  • 一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

    Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

    生信宝典

扫码关注云+社区

领取腾讯云代金券