1

我正在开发人脸识别网络应用程序，但在尝试“修复”图像上的边界框使其响应时遇到了一些问题。如果屏幕是全尺寸的，那是（正确的）结果： 全尺寸屏幕（正确）

但是，一旦我尝试调整窗口浏览器的大小，使其更小，框就会像这样失去它的位置： 小屏幕（不正确）

.image-container {
  position: relative;
  display: inline-block;
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  border: 2px solid red;
}

      <div>
        {this.setRecognitionType()}
        <div className={styles["image-container"]}>
          {this.state.box ? (
            <div
              className={styles.box}
              style={{
                top: this.state.box.top,
                right: this.state.box.right,
                bottom: this.state.box.bottom,
                left: this.state.box.left
              }}
            />
          ) : null}
          <img id="image" src={this.props.imageUrl} alt="" />
        </div>
      </div>

在这种情况下，编辑框的属性：

top: 192px;

right: 85px;

bottom: 118px;

left: 92px;

编辑：解决方案正如已经回答的那样，唯一的方法似乎是使用百分比而不是 px。

我整理的方式：

left: (coords.left / imageWidth) * 100,
top: (coords.top / imageHeight) * 100,
right: ((width - coords.right) / imageWidth) * 100,
bottom: ((height - coords.bottom) / imageHeight) * 100

“imageHeight”和“imageWidth”是原始图片的大小，坐标是以像素为单位的坐标。

4

1 回答 1

1

由于您使用静态单位定位框，因此您的代码没有产生预期的效果。随着图片变小，框总是距离顶部 192px，距离右侧 85px，等等。尝试使用与此类似的百分比单位（显然使用数字直到看起来正确）：

top: 30%;
right: 5%;
left: 5%;
bottom: 15%;
于 2018-09-16T11:10:47.687 回答