人脸检测模型边界框

Question

我正在使用claraifai API，已经检索了人脸的区域以形成边界框，但实际上绘制该框会使我严重偏离图像中显示的值。

代码：

 return {
      topRow: face.top_row * height,
      leftCol: face.left_col * width,
      bottomRow: (face.bottom_row * height) - (face.top_row * height),
      rightCol: (face.right_col * width) - (face.left_col * width)
    }

Answer 1

尝试添加相对位于父div内的div。

之前：

const FaceImage = ({image, boxs}) => {
    return (
        <div className="faceimage">
            <img id="imgA" alt='' src={image}/>
            <div className="bounding-box" style={{
                top: boxs.top_row, 
                left: boxs.left_col,
                bottom: boxs.bottom_row,
                right: boxs.right_col 
            }}></div>
        </div>
    );
}

之后：

const FaceImage = ({image, boxs}) => {
    return (
        <div className="faceimage">
            <div className="relative">
                <img id="imgA" alt='' src={image}/>
                <div className="bounding-box" style={{
                    top: boxs.top_row, 
                    left: boxs.left_col,
                    bottom: boxs.bottom_row,
                    right: boxs.right_col 
                }}></div>
            </div>
        </div>
    );
}

Css：

.relative {
    position: relative;
}