如何使用 React 剪切图像溢出 div答案

【问题标题】：How to cut image overflow div using react如何使用 React 剪切图像溢出 div
【发布时间】：2021-01-20 18:04:43
【问题描述】：

我使用 react-webcam 捕获图像。并捕获图像溢出<div>。所以，我只想在<div> 中获取图像。

如果，我使用hidden 它只是隐藏，而不是丢弃（或裁剪）。

所以，我想知道如何删除外部图像。

捕获图像

<CustomWebCam    
          onLoadedData={() => {
            setTimeout(() => setError(false), 500);

            setLoading(false);
          }}
          audio={false}
          ref={webcamRef}
          screenshotFormat="image/jpeg"
          screenshotQuality="1.0"
          forceScreenshotSourceSize
          videoConstraints={videoConstraints}
          onUserMediaError={() => {
            alert('Error');
          }}
          muted
        />

我只想在这里使用div 的图片

          <ReactImageCrop
            width={windowDimensions.width * 0.7}
            height={windowDimensions.height * 0.7 * 0.5}
            imageData={imgSrc}
          />

【问题讨论】：

我不知道如何在页内上传图片，所以我上传了带有链接的图片抱歉:'(
请包含代码。
@YTG 好的，包括代码
@Dev_Kim 你设法解决了这个问题吗？我也面临同样的问题。
@TCL 也许是的..？我使用了 getBoundingClientRect。 const imageTarget = document.getElementById('full'); const imageRect = imageTarget.getBoundingClientRect(); 此代码获取全尺寸图像位置。 const target = document.getElementById('guide'); const clientRect = target.getBoundingClientRect(); 此代码获取引导线图像位置。并使用 ctx.drawImage 函数

标签： html css reactjs image overflow

【解决方案1】：

试试这个：

.img {
  width:460px;
  overflow:hidden;
}

<div class="img">
 <img src="https://i.stack.imgur.com/8NrcV.png">
</div>

【讨论】：

我只想使用内部图像其他组件。如果我使用overflw: hidden，它不是裁剪图像:'(