tfjs BlazePose对HTMLImageElement执行姿态检测时运行报错排查

报错核心原因有两点：

1. 脚本引入顺序错误：HTML中先引入@tensorflow-models/pose-detection，后引入TF.js核心库。pose-detection的UMD包加载时会立即读取全局挂载的tf对象，此时TF.js尚未加载，库内部保存的tf引用为undefined，后续调用estimatePoses执行3D张量运算时，访问tf.Tensor就会抛出类型错误。
2. 未等待TF.js后端初始化完成：TF.js的WebGL后端初始化是异步过程，即使脚本顺序正确，未等初始化完成就直接调用推理接口，也会出现后端对象未定义的问题。

代码还存在两个不触发当前报错但会导致功能异常的问题：

• detector变量未显式声明，会创建隐式全局变量
• 定义了estimationConfig但调用estimatePoses时未传入，自定义的推理参数（开启3D输出、置信度阈值等）不会生效

调整HTML脚本加载顺序 #

严格按照「TF.js依赖 → MediaPipe依赖 → pose-detection库 → 业务代码」的顺序引入脚本，保证上层库加载时依赖已经挂载到全局。修正后的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <!-- TF.js核心、转换工具、WebGL后端 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl" crossorigin="anonymous"></script>
    <!-- MediaPipe Pose运行时 -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose" crossorigin="anonymous"></script>
    <!-- 姿态检测模型库 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection" crossorigin="anonymous"></script>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

修正JS逻辑 #

执行业务逻辑前先等待TF.js后端初始化完成，补全变量声明，调用推理接口时传入配置参数。修正后的main.js代码：

let detector = null;
const img = new Image();

img.onload = async () => {
    // 初始化WebGL后端并等待加载完成
    await tf.setBackend('webgl');
    await tf.ready();

    const model = poseDetection.SupportedModels.BlazePose;
    const detectorConfig = {
        runtime: 'mediapipe',
        modelType: 'lite',
        solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/pose',
    };

    try {
        detector = await poseDetection.createDetector(model, detectorConfig);
        const estimationConfig = {
            enableSmoothing: false,
            maxPoses: 1,
            type: 'full',
            scoreThreshold: 0.65,
            render3D: true
        };
        // 传入输入图片与推理配置
        const poses = await detector.estimatePoses(img, estimationConfig);
        console.log('3D姿态检测结果：', poses);
    } catch (err) {
        console.error('运行错误：', err);
        if (detector) {
            detector.dispose();
            detector = null;
        }
    }
}

img.src = "testimg.jpg";

修正后刷新页面，程序会依次完成TF.js后端初始化、模型加载，之后正常输出测试图片对应的3D姿态关键点数据，不会再出现读取undefined的Tensor属性的报错。

内容的提问来源于stack exchange，提问作者Abhishek Mishra