Как сделать обрезку краёв фото на сайте?

window.onload = function() { 
  var oAl = document.querySelector('.photos_wrapper'), oSrs; 
  document.addEventListener('dragstart', function(ev) { 
    oSrs = ev.target.src; 
  }); 
  oAl.addEventListener('dragover', function(ev) { 
    ev.preventDefault(); 
  }); 
  oAl.addEventListener('drop', function(ev) { 
    ev.preventDefault(); 
    if (ev.target.classList.contains('vignette')) { 
      ev.target.style.backgroundImage = `url('${oSrs}')`; 
      let oClear = document.createElement('DIV'); 
      oClear.classList.add('clear'); 
      oClear.innerHTML = '×'; 
      oClear.addEventListener('click', function(ev) { 
        this.parentElement.style.backgroundImage = ''; 
        this.remove(); 
      }); 
      ev.target.appendChild(oClear); 
    } 
  }); 
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
.photos_wrapper { 
  background: url(https://i.stack.imgur.com/WEjJ0.jpg) -5px -3px no-repeat; 
  height: 439px; 
  margin: 0 auto; 
  position: relative; 
  width: 612px; 
} 
 
.vignette { 
  background: #eff; 
  background: url('https://i.imgur.com/sgsEcPB.jpg') center no-repeat; 
  background-size: cover; 
  border: 2px solid #0cc; 
  box-shadow: 1px 2px 2px #000; 
  overflow: hidden; 
  position: absolute; 
} 
.vignette:hover>.clear { 
  visibility: visible; 
} 
 
.style_1 { border-radius: 30%; height: 130px; width: 225px; } 
.style_2 { border-radius: 50%; height: 106px; width: 148px; } 
.style_3 { border-radius: 30%; height: 111px; width: 151px; } 
.style_4 { border-radius: 30%; height: 145px; width: 236px; } 
 
.photo_1 { left: 26px; top: 20px; } 
.photo_2 { left: 358px; top: 20px; } 
.photo_3 { left: 15px; top: 160px; } 
.photo_4 { left: 151px; top: 149px; transform: rotate(-19deg); } 
.photo_5 { left: 307px; top: 149px; transform: rotate(19deg); } 
.photo_6 { left: 445px; top: 160px; } 
.photo_7 { left: 22px; top: 275px; } 
.photo_8 { left: 351px; top: 275px; } 
 
.thumbs_wrapper { 
  bottom: 0; 
  display: flex; 
  flex-flow: row nowrap; 
  justify-content: space-around; 
  position: absolute; 
  width: 100%; 
} 
 
.clear { 
  background: #fff; 
  border-radius: 50%; 
  bottom: 4px; 
  cursor: pointer; 
  font: bold 20px/20px 'Arial'; 
  height: 20px; 
  left: calc(50% - 10px); 
  opacity: 0.5; 
  position: absolute; 
  text-align: center; 
  transition: all 0.6s ease; 
  visibility: hidden; 
  width: 20px; 
} 
.clear:hover { 
  border-radius: 10%; 
  opacity: 1.0; 
} 
 
.thumbs_wrapper>img { 
  border: 1px solid #eee; 
  box-shadow: 1px 3px 8px #000; 
  height: 30px; 
  width: 40px; 
} 
.thumbs_wrapper>img:hover { 
  animation: shake .5s ease infinite; 
} 
 
@keyframes shake { 
  26% { transform: rotate(-20.0deg); } 
  76% { transform: rotate(20.0deg); } 
}

<div class="photos_wrapper"> 
  <div class="vignette style_1 photo_1"></div> 
  <div class="vignette style_1 photo_2"></div> 
  <div class="vignette style_2 photo_3"></div> 
  <div class="vignette style_3 photo_4"></div> 
  <div class="vignette style_3 photo_5"></div> 
  <div class="vignette style_2 photo_6"></div> 
  <div class="vignette style_4 photo_7"></div> 
  <div class="vignette style_4 photo_8"></div> 
  <div class="thumbs_wrapper"> 
    <img src="https://i.imgur.com/IHb1NmG.jpg"> 
    <img src="https://i.imgur.com/SxTlnLn.jpg"> 
    <img src="https://i.imgur.com/5628Txd.jpg"> 
    <img src="https://i.imgur.com/sEd6Vn5.jpg"> 
    <img src="https://i.imgur.com/saDiyYu.jpg"> 
    <img src="https://i.imgur.com/075L1sG.jpg"> 
    <img src="https://i.imgur.com/I5G6HaZ.jpg"> 
    <img src="https://i.imgur.com/wDT622c.jpg"> 
  </div> 
</div>