时间戳

首页 > 解决方案 > 将 p5.Image 转换为 p5.Element Dom Image 后的关键点错误

javascript - 将 p5.Image 转换为 p5.Element Dom Image 后的关键点错误

问题描述

我想在某个时刻从网络摄像头拍摄单张图像，然后发送到poseNet.singlePose以获取关键点并根据我需要的区域裁剪该图像。但它确实有错误的关键点，裁剪后的图像不是我需要的区域。但如果我这样做

poseNet = ml5.poseNet(video, options, modelReady);

然后图像裁剪效果很好。因此，仅当我只想将单个图像发送到poseNet 时才会出现问题。

let img = video.get(0,0,width,height);
globalImage = img; 

let imgElement = new Image();
    imgElement.src = img.canvas.toDataURL();
    imgElement.width = width;
    imgElement.height = height;
              
poseNet.singlePose(imgElement);

并且裁剪发生在姿势事件侦听器中我这样做

let img = pImage.get(x,y,w,h); 
p.image(img, 0, 0, p.width, p.height);

我做错了什么？

标签： javascriptp5.jsml5ml5.js

解决方案

作为一个修补程序，这似乎在 Promise 中起作用：

poseNet.singlePose(img_dom).then((results) => {
 
   pose = results[0].pose;

});

但是为什么如果我这样做它不起作用：

 poseNet.on('pose', p.gotPoses);

gotPoses 回调接收到具有错误关键点的姿势

如果你想使用estimateSinglePose然后这样做

    <html>
      <body>
        <!-- Load TensorFlow.js -->
        <script src="https://unpkg.com/@tensorflow/tfjs"></script>
        <!-- Load Posenet -->
        <script src="https://unpkg.com/@tensorflow-models/posenet">
        </script>
        <script type="text/javascript">
          posenet.load().then(function(net) {
            // posenet model loaded
          });
        </script>
      </body>
    </html>

    const imageScaleFactor = 0.50;
    const flipHorizontal = false;
    const outputStride = 16;
    
    const imageElement = document.getElementById('cat');// load the posenet model
    const net = await posenet.load();
const pose = await net.estimateSinglePose(imageElement, imageScaleFactor, flipHorizontal, outputStride);

推荐阅读