【一步步开发AI运动小程序】十八、如何识别用户上传图片中的人体、运动、动作、姿态？

合集 - 一步步开发AI运动小程序(24)

1.【一步步开发AI运动小程序】一、准备工作2023-05-182. 【一步步开发AI运动小程序】二、引入插件2023-05-183.【一步步开发AI运动小程序】三、运动识别处理流程2023-05-194.【一步步开发AI运动小程序】四、小程序如何抽帧2023-05-195.【一步步开发AI运动小程序】五、帧图像人体识别2023-05-236.【一步步开发AI运动小程序】六、人体骨骼图绘制2023-05-247.【一步步开发AI运动小程序】七、进行运动计时、计数2023-05-258.【一步步开发AI运动小程序】八、利用body-calc进行姿态识别2023-05-269.【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用2023-05-2910.【一步步开发AI运动小程序】十、姿态动作相似度比较2023-05-3111.【一步步开发AI运动小程序】十一、人体关键点跳跃追踪2023-06-0512.【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数012023-06-1613.【一步步开发AI运动小程序】十三、自定义一个运动分析器，实现计时计数022023-07-1014.【一步步开发AI运动小程序】十四、主包超出2M大小限制，如何将插件分包发布？2023-12-2015.【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？2023-12-2516.【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？2023-12-28

17.【一步步开发AI运动小程序】十八、如何识别用户上传图片中的人体、运动、动作、姿态？2024-05-28

18.【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？2024-05-2019.【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片？2024-07-0920.【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？2024-10-0921.AI运动小程序开发常见问题集锦一2024-09-1922.AI运动小程序开发常见问题集锦二2024-11-0523.【更新日志】新发布的1.5.0版本插件中的增强模式，作用几何？2024-03-2624.【一步步开发AI运动小程序】二十一、如果将AI运动项目配置持久化到后端？2024-11-11

收起

【云智AI运动识别小程序插件】，可以为您的小程序，赋于人体检测识别、运动检测识别、姿态识别检测AI能力。本地原生识别引擎，内置10余个运动，无需依赖任何后台或第三方服务，有着识别速度快、体验佳、扩展性强、集成快、成本低的特点，本篇实现需要使用此插件，请先行在微信服务市场或官网了解详情。

一、引言

上一篇文章，为您分享了如何对用户选择（上传）的视频，进行人体检测识别，并进行姿态分析、运动计数等实现。今天我们继续为您分享如何对用户上传（选择）图片，进行人体检测及姿态运动分析。同视频识别检测原理相似，只要拿到用户上传或选择的图片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);
    };

好了，视频和图片人体检测、姿态和运动分析就为您介绍到这，更多插件的使用欢迎评论交流。