uniapp使用tensorflow.js（微信端-02）_tensorflow.js 人脸比对 uniapp

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>
1
2
3
4
5
6

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()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.methods内加载谷歌的模型

模型有很多种可以自行去官网查看挺有意思的（这边用的是动作识别）

async loadPosenet(){
    this.net = await posenet.load({
        architecture:'MobileNetV1',
        outputStride:16,
        inputResolution:193,
        multiplier:0.5
    })
    console.log("模型加载完成",this.net);
},
1
2
3
4
5
6
7
8
9

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()
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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()
}
1
2
3
4
5
6
7
8

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()
}
1
2
3
4
5
6
7
8
9

在这就结束了，已经可以绘制出全身了。