前言

这拗口的标题令我自己都不知所措，换一种方式来说，在截图时，我们会发现，我们除了我们选中的截图区域外，都是有阴影遮罩层的。而选中的区域，就是正常显示，那么在页面中，该怎么实现这种布局方式呢？

开始

首先，由于截图的区域是可以缩小放大并且移动的，所以我们默认知道移动区域的位置和宽高，所以接下来的例子都是默认以固定宽高作为实例，实际使用时肯定还要配合相应的逻辑。

1.使用clip-path

产生的结果如图所示，使用clip-path就是在shadow的阴影背景中裁剪出一个中间空心的矩形，剩下的部分还是rgba(0, 0, 0, .6)。然后将裁剪框绝对定位到中间空心的矩形，实现页面布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .back{
        width: 500px;
        height: 500px;
        position: relative;
    }
    .container {
        width: 500px;
        height: 500px;
    }
    .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        clip-path: polygon(evenodd, 0 0, 0 500px, 500px 500px, 500px 0, 0 0,
        100px 100px, 100px 400px, 400px 400px, 400px 100px, 100px 100px);
        top: 0;
        left: 0;
    }
    .crop {
        width: 300px;
        height: 300px;
        position: absolute;
        box-sizing: border-box;
        border: 2px solid green;
        left: 100px;
        top: 100px;
    }
  </style>
</head>
<body>
  <div class="back">
    <div class="container">
      <img src="./logo-alt.png" width="100%" height="100%" alt="">
    </div>
    <div class="shadow"></div>
    <div class="crop"></div>
  </div>
</body>
</html>

2.使用双层div布局

首先下层是我们完整的图片，然后拥有正常的阴影遮罩，但是而上层的裁剪框中，也放置了我们完整的图片，由于裁剪框有宽高限制，只能显示一部分的图片，因为只要将图片translate进行相应的移动，与裁剪框的偏移位置一致，就能展示出下层对应位置的图片。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      img {
          vertical-align: middle;
      }
      .main {
          width: 500px;
          height: 500px;
          position: relative;
      }
      .img-container {
          width: 100%;
          height: 100%;
      }
      .crop-div {
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, .6);
          top: 0;
          left: 0;
      }
      .crop-img {
          position: absolute;
          left: 100px;
          top: 100px;
          width: 200px;
          height: 200px;
          overflow: hidden;
          border: 2px solid green;
          background: #fff;
      }
      .crop-img img {
          transform: translate(-100px, -100px);
      }
  </style>
</head>
<body>
  <div class="main">
    <div class="img-container">
      <img src="./logo-alt.png" width="500" height="500" alt="">
    </div>
    <div class="crop-div">
      <div class="crop-img">
        <img src="./logo-alt.png" width="500" height="500" alt="">
      </div>
    </div>
  </div>
</body>
</html>

结语

最开始想过用canvas，但是仔细思考了下，感觉使用canvas并没有使问题变得更加简单，之后有空了也会去尝试一下。还有一开始也并没有想到第二种方式，我想到的只是老老实实分成5部分布局，把中间的区域留出来进行计算，吃力不讨好，最终请教了其他大佬才写出的例子。可能还是因为思维不够灵敏，在布局的考虑的经验上还是不足。以后还是要多多思考，多多发现问题。还有，如果大家有其他更好的方法，麻烦也请告诉我一下~

谢谢大家。大家可以关注我的，微信公众号——懒狗小前端；

实现截图时，选择区域的无阴影遮罩

前言

开始

1.使用clip-path

2.使用双层div布局

结语