reactjs - 人脸检测模型边界框
问题描述
我正在使用 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)
}
解决方案
尝试在父 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;
}
推荐阅读
- visual-studio-code - VSCode 如何从 editor.fontfamily 的给定字体列表中选择字体?
- python - Python 相对导入。“尝试相对导入超出顶级包”
- java - 如何在Android中获取材质对话框输入字段的值?
- reactjs - AWS Amplify 从经过身份验证的 api 检索没有所有者财产的数据
- prometheus - Prometheus 抛出“错误的响应状态 401 未经授权”-即使在指定正确的配置“basic_auth_users”之后
- c++ - 构建 qt 子项目时,GNU Make 退出并显示代码 1
- ios - 直通点击,从子视图控制器到父视图控制器的事件
- jquery-ui - Jquery价格范围滑块值仅在iphone中不显示
- python - Numpy如何在矢量化中排除数组?
- javascript - 我想在 Nuxt.js 中异步处理组件并显示警报消息