pose_score | 方法

这是 pose_score 的方法类合集。

先贴一下代码，后面讲解

import axios from 'axios'
import * as posenet from '@tensorflow-models/posenet';
import api from "src/pages/api/api"

const minConfidence = 0.2;
const lineWidth = 1;

// 坐标转换
const toTuple = ({y, x}) => {
    return [y, x];
}

// 将图片绘制到canvas
const renderImageToCanvas = (image, size, ctx) => {
    ctx.drawImage(image, 0, 0, size[0], size[1]);
}

const cleanCanvas = (canvas, ctx) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// 画关键点
const drawKeypoints = (keypoints, ctx, scale = 1, color = "#ff0000") => {
    for (let i = 0; i < keypoints.length; i++) {
        const keypoint = keypoints[i];
        if (keypoint.score < minConfidence) {
            continue;
        }
        const {y, x} = keypoint.position;
        drawPoint(ctx, y * scale, x * scale, 3, color);
    }
}

const drawBaiduKeypoints = (dataArray, ctx, scale = 1, color = "#ff0000") => {
    for (let data in dataArray) {
        let y = dataArray[data]["y"];
        let x = dataArray[data]["x"];
        drawPoint(ctx, y * scale, x * scale, 3, color);
    }
}

// canvas画点
const drawPoint = (ctx, y, x, r, color) => {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
}

// 关键点连线
const drawSkeleton = (keypoints, ctx, scale = 1, color = "#ff0000") => {
    const adjacentKeyPoints = posenet.getAdjacentKeyPoints(keypoints, minConfidence);

    adjacentKeyPoints.forEach((keypoints) => {
        drawSegment(
            toTuple(keypoints[0].position), toTuple(keypoints[1].position), color, scale, ctx);
    });
}

// canvas画线
const drawSegment = ([ay, ax], [by, bx], color, scale, ctx) => {
    ctx.beginPath();
    ctx.moveTo(ax * scale, ay * scale);
    ctx.lineTo(bx * scale, by * scale);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = color;
    ctx.stroke();
}

const getImagePose = (keypoints) => {
    let img_thetas = [];

    img_thetas.push({
        right_big_arm: getTheta(toTuple(keypoints[8].position), toTuple(keypoints[6].position)),
        right_small_arm: getTheta(toTuple(keypoints[10].position), toTuple(keypoints[8].position)),
        left_big_arm: getTheta(toTuple(keypoints[7].position), toTuple(keypoints[5].position)),
        left_small_arm: getTheta(toTuple(keypoints[9].position), toTuple(keypoints[7].position)),
        right_body: getTheta(toTuple(keypoints[12].position), toTuple(keypoints[6].position)),
        left_body: getTheta(toTuple(keypoints[11].position), toTuple(keypoints[5].position)),
        right_big_leg: getTheta(toTuple(keypoints[14].position), toTuple(keypoints[12].position)),
        right_small_leg: getTheta(toTuple(keypoints[16].position), toTuple(keypoints[14].position)),
        left_big_leg: getTheta(toTuple(keypoints[13].position), toTuple(keypoints[11].position)),
        left_small_leg: getTheta(toTuple(keypoints[15].position), toTuple(keypoints[13].position)),
    });
    return img_thetas;
}

// 和 y 轴比较
const getTheta = ([ay, ax], [by, bx]) => {
    let angle = Math.atan2((bx - ax), (by - ay))
    let theta = angle * (180 / Math.PI);
    return theta > 0 ? theta : 360 + theta;
}

const getScore = (img_pose_thetas, video_pose_thetas) => {
    let score = [];
    score.push({
        right_big_arm: img_pose_thetas[0]["right_big_arm"] - video_pose_thetas[0]["right_big_arm"],
        right_small_arm: img_pose_thetas[0]["right_small_arm"] - video_pose_thetas[0]["right_small_arm"],
        left_big_arm: img_pose_thetas[0]["left_big_arm"] - video_pose_thetas[0]["left_big_arm"],
        left_small_arm: img_pose_thetas[0]["left_small_arm"] - video_pose_thetas[0]["left_small_arm"],
        right_body: img_pose_thetas[0]["right_body"] - video_pose_thetas[0]["right_body"],
        left_body: img_pose_thetas[0]["left_body"] - video_pose_thetas[0]["left_body"],
        right_big_leg: img_pose_thetas[0]["right_big_leg"] - video_pose_thetas[0]["right_big_leg"],
        right_small_leg: img_pose_thetas[0]["right_small_leg"] - video_pose_thetas[0]["right_small_leg"],
        left_big_leg: img_pose_thetas[0]["left_big_leg"] - video_pose_thetas[0]["left_big_leg"],
        left_small_leg: img_pose_thetas[0]["left_small_leg"] - video_pose_thetas[0]["left_small_leg"],
    })
    return score;
}

const getToken = () => {
    axios.post(api.baidu_access_token).then(function (response) {
        console.log(response);
        return response;
    }).catch(function (error) {
        return error
    })
}

const getUrlParam = (name) => {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

const load_camera = () => {
    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）

    navigator.getUserMedia({
        video: true
    }, gotStream, noStream); //参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
};


const gotStream = (stream) => {
    video.srcObject = stream;
    video.play();
}

const noStream = (err) => {
    alert("失败");
}

export {
    drawKeypoints,
    renderImageToCanvas,
    drawSkeleton,
    getImagePose,
    getScore,
    cleanCanvas,
    getToken,
    drawBaiduKeypoints,
    getUrlParam,
    load_camera
};