Question

“蒙版图像”下面分为3部分：

1。外部非透明部分

2。边界

3。内部透明部分

背景：

我允许用户在“蒙版”图像上方上传图像并进行“蒙版”，这样上传的图像应仅显示在内部部分中。...

用户上传的图片：

用户在蒙版图像上上传的图像：

用户上载一次后，他就可以将上载的图像拖动到[strong]内部的[透明] 部分，就可以了。...

问题：

但是连同内部，用户可以通过拖动外部[非透明] 部分来拖动上传的图像。...但是我想停止此操作。...

https://codepen.io/kidsdial/pen/qgybgL

Here is video link

摘要：上传的图像应仅在透明部分中拖动。...

fileupa.onchange = e => {
 target_imga.src = URL.createObjectURL(fileupa.files[0]);   
}
let prevX = 0, prevY = 0,translateX = 0, translateY = 0, scale = 1, zoomFactor = 0.1;
function onDragStart(evt) {
  if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
  }
  prevX = evt.clientX;
  prevY = evt.clientY;
}
function onDragOver(evt) {
  translateX += evt.clientX - prevX;
  translateY += evt.clientY - prevY;
  prevX = evt.clientX;
  prevY = evt.clientY;
  updateStyle();
}
function updateStyle() 
{ 
let transform = "translate(" +translateX+ "px, "+ translateY + "px) scale("+scale+")"; 

if(document.querySelector('#uploadedImg img'))
document.querySelector('#uploadedImg img').style.transform = transform;
}

.container {
  border: 1px solid #DDDDDD;
  width: 612px;
  height: 612px;
  position:relative;
  background:red;
}
.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
  top: 100px;
  z-index: 1;
  left: 280px;
}
.masked-imga {
  -webkit-mask-image: url(https://i.stack.imgur.com/ChbtV.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 416px;
  height: 388px;
  position: absolute;
  top: 10px;
  left: 173px; 
  background-color: white;
}
.minaimga {
  display: block;
  background-color: white;
  height: 278px;
}

<div class="container">

<label for="fileupa" class="customa">
    Upload Image
</label>
<input id="fileupa"  type="file" style="display:none;">
<div class="minaimg masked-imga"   ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimga">         
      <img id="target_imga"  alt="">
      <div></div>
    </div>
  </div>
</div>
</div>

Answer 1

在这里，添加了被遮罩的图像，并能够确定图像内部或外部的单击位置。

我在codepen上以您的代码为例确保查看maskedImageUrl

仅将上传的图像拖到图像的透明部分内

1 个答案: