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

【问题标题】：Wrong keypoints after converting p5.Image to p5.Element Dom Image将 p5.Image 转换为 p5.Element Dom Image 后的关键点错误
【发布时间】：2020-12-12 19:19:18
【问题描述】：

我想在某个时刻从网络摄像头拍摄单张图像，然后发送到 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);

我做错了什么？

【问题讨论】：

标签： javascript p5.js ml5 ml5.js

【解决方案1】：

作为一个修补程序，这似乎在 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);

【讨论】：