Ниже 3 изображения маски:
1. Непрозрачная внешняя часть
2. Граница
3. Внутренняя прозрачная часть
Фон :
Я разрешаю пользователюзагрузите изображение на изображении выше Маска и выполняйте маскирование, чтобы загруженное изображение отображалось только в внутри части ....
Загруженное пользователем изображение :
Загруженное пользователем изображение на изображении маски :
После загрузки пользователь может перетащить загруженное изображение в внутри [Прозрачная] часть, это нормально ....
Проблема :
Но вместе с тем внутри пользователь может перетаскивать загруженное изображение, перетаскивая за пределы [Непрозрачный] часть .... Но я хочу остановить это ....
https://codepen.io/kidsdial/pen/qgybgL
Вот ссылка на видео
Сводка : Uзагруженное изображение должно перетаскиваться только в прозрачную часть ....
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>