十八、如何识别用户上传图片中的人体、运动、动作、姿态？

原创

alphaair

发布于 2024-06-13 14:24:25

1110

发布于 2024-06-13 14:24:25

随着深度学习推理技术的不断发展，让小型设备运行深度学习成为可能，阿里体育等IT大厂，推出的“乐动力”、“天天跳绳”AI运动APP，让云上运动会、线上运动会、健身打卡、AI体育指导等概念空前火热。那么，能否将这些在APP成功应用的场景搬上微信小程序，分享这些概念的红利呢？本系列文章就带您一步一步从零开始开发一个AI运动小程序，本系列文章将使用“AI运动识别”小程序插件，插件详情可以前往微信服务市场搜索相应插件。

一、引言

上一篇文章，为您分享了如何对用户选择（上传）的视频，进行人体检测识别，并进行姿态分析、运动计数等实现。今天我们继续为您分享如何对用户上传（选择）图片，进行人体检测及姿态运动分析。同视频识别检测原理相似，只要拿到用户上传或选择的图片RGBA数据，即可进一步进行人体识别、姿态、运动分析等，如下图所示：

二、解决方案

微信小程序并没有像视频解码一样，提供直接读取图片像素数据的API，所以需要我们自行实现像素数据读取部分。根据我们的经验，有两种方案可以实现选定图片的像素数据读取。一是通过Canvas画布绘制获得，一种是先读取图像文件二进行流，再进行解析。

代码实现

由于自行解析图像像素数据方案，需要针对不同的图像格式进行解析，专业性强、工作量大，不建议采用，当然在实际实现中也可以考虑将图像传至后端使用专业库进行解析再回传，就是效率偏低、成本偏高。所以推荐采用canvas方案，简单、快速，代码如下：

    let res = await wx.chooseMedia({
        mediaType: 'image',
        count: 1
   });

   let path = res.tempFiles[0].tempFilePath;
   res = await wx.getImageInfo({
       src: path,
   });

    //写入图片
    const img = canvas.createImage();
    img.src = path;
    img.width = res.width;
    img.height = res.height;
    img.onload = async () => {
        context.drawImage(img, 0, 0, res.width, res.height);
        const buffer = context.getImageData(0, 0, res.width, res.height);
        const frame = {
            data: new Uint8Array(buffer.data),
            width: buffer.width,
            height: buffer.height
        };
        let human = await humanDetection.detectionAsync(frame);
        console.log(human);
    };