reactjs - 人脸检测模型边界框

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;
}