时间戳

首页 > 解决方案 > 将捕获按钮添加到捕获窗口的底部中心

javascript - 将捕获按钮添加到捕获窗口的底部中心

问题描述

我正在使用 react-webcam npm 库，目前，“捕获图像”按钮位于屏幕底部，如图所示。 捕获按钮默认位置

我想要做的是将该按钮放在捕获窗口的底部中心，如我在此处显示的那样。 需要添加捕获按钮的区域

这是我的相机和按钮

<Webcam
  audio={false}
  ref={webcamRef}
  screenshotFormat="image/jpeg"
  style={{ height: 600, width: "100%" }}
/>
<button 
  onClick={capture} 
  style={{marginTop: "-200px"}}
 >
  Capture photo
</button>

我试过给 marginTop 和 marginBottom 但无法完成。知道如何解决这个问题吗？

标签： javascriptreactjs

解决方案

您需要一个可以包装按钮的容器来给它一个绝对位置：

//style.css

 .video-container {
  position: relative;
 }

.button {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, 0%);
}

//你的jsx

<div
    className="video-container"
    style={{ height: '600px', width: "100%" }}
  >
    <Webcam
      autoPlay
      style={{ height: '100%', width: "100%" }}
      audio={false}
      ref={webcamRef}
      screenshotFormat="image/jpeg"
    />
    <button className="button"   onClick={capture} >Capture photo</button>
  </div>

演示：https ://codesandbox.io/s/strange-ardinghelli-mss9c?file=/src/index.js:0-42

推荐阅读