uniapp使用tensorflow.js(微信端-02)
接下来就是一个例子也是按照视频一点一点敲出来的代码,有兴趣可以直接转去视频教程,在第一章有地址
1.html代码 启动照相机 和 画布
<view class="container">
<camera device-position="back" flash="off" binderror='error' style="width:100%;height: 100%; ">
<canvas canvas-id="pose" style="width:100%;height:100%;">
</canvas>
</camera>
</view>
2.在onReady方法中获取相机的帧画面等一系列的操作(我不是很明白,注意的是onReady要为异步调用)
async onReady() {
const camera = uni.createCameraContext(this)
this.canvas = uni.createCameraContext('pose',this)
this.loadPosenet()
let count = 0
const listener = camera.onCameraFrame((frame)=>{
count++
if(count === 10){
if(this.net){
this.drawPose(frame)
}
count = 0
}
})
listener.start()
},
3.methods内加载谷歌的模型
模型有很多种可以自行去官网查看挺有意思的(这边用的是动作识别)
async loadPosenet(){
this.net = await posenet.load({
architecture:'MobileNetV1',
outputStride:16,
inputResolution:193,
multiplier:0.5
})
console.log("模型加载完成",this.net);
},
4.methods(这段代码大概是获取每一帧的图片并锁定鼻子手的位置)
async drawPose(frame){
const pose = await this.datectPose(frame,this.net)
const ctx = uni.createCanvasContext('pose')
if(pose == null || this.canvas == null) return
if(pose.score >= 0.3){
for(var i in pose.keypoints ){
const point = pose.keypoints[i];
if(point.score>=0.5){
const {y,x} = point.position
this.drawCircle(ctx,x,y)//绘制点
}
}
//将点连成线
const adjacentKeyPoints = posenet.getAdjacentKeyPoints(pose.keypoints,0.5)
for(var i in adjacentKeyPoints ){
const points = adjacentKeyPoints[i]
this.drawLine(ctx,points[0],points[1])
}
ctx.draw()
}
},
5.methods内绘制点
视频中的代码绘制在这里面是用不了的,微信小程序更新了createCameraContext,具体这边就不说了,用我这个就能实现
代码写到这运行起来就可以看到视频中我们的眼睛、鼻子、耳朵被红点锁定但是位置不对,需要按照自己的需要进一步的优化
drawCircle(ctx,x,y){
console.log(x+"-------------"+y)
ctx.beginPath()
ctx.setFillStyle('#ff0000')
ctx.arc(x - 40, y + 50, 10, 0, 2 * Math.PI)
ctx.closePath()
ctx.fill()
}
6.methods内绘制线(线只能绘制身体 脸部是没有线的 )
drawLine(ctx,p0,p1){
console.log(p1)
ctx.beginPath()
ctx.moveTo(p0.position.x - 40, p0.position.y + 50)
ctx.lineTo(p1.position.x - 40, p1.position.y + 50)
ctx.setLineWidth(10)
ctx.setStrokeStyle('#55aa00')
ctx.stroke()
}
在这就结束了,已经可以绘制出全身了。