Drag uploaded image only inside Transparent part of the image

Question

There are 3 parts in below Mask images :

1.Outside Non-Transparent Part

2.Border

3.Inside Transparent part

Background :

I am allowing user to upload image on above Mask images & doing Masking, so that uploaded image should display only in inside part....

User uploaded image :

User Uploaded Image on Mask image :

once user upload he can able to drag the uploaded image in the inside [ Transparent ] part, thats fine....

Issue :

But along with inside, user can able to drag the uploaded image by dragging outside [ Non Transparent ] part.... But i want to stop this....

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

Here is video link

Summary : Uploaded image should drag only in Transparent part....

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>

I don't think this is going to be a simple fix with CSS, If you added the mask to a canvas element you could then use JS to check the pixel being clicked and see if it has a colour to stop the drag action of the uploaded image. — Ginger Wizard, Feb 18 '19 at 07:11
@GingerCSSWizard Thanks , but our android app developers used same concept and done this.... so i thought it will work..... can you please guide me `how to add the mask to a canvas element`.... — , Feb 18 '19 at 07:14
You could draw the canvas off screen to detect the pixel being clicked, https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image should point you in the right direction. — Ginger Wizard, Feb 18 '19 at 07:18
Have you tried clip-path? https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path — gengns, Feb 18 '19 at 11:29
@gengns Thanks for the link, i already tried that way : https://codepen.io/kidsdial/pen/OdozOG & got the solution for single mask image.... but i have thousands of mask images like this, so i am trying for some generic solution so that code will work if i change from mask image to another.... — , Feb 18 '19 at 11:31
You can pass SVGs directly, instead of using PNGs. With Inkscape you can transform all those images to vectors images (or just google svg heart and so on), also you will get a nice result in all resolutions :) — gengns, Feb 18 '19 at 11:47
I don't have that much Idea on svg, but still passing all those thousand svgs is a manual work right? And it takes a lot of time? But client want some generic solution.... I don't want to change the code for each mask images @gengns , can you please help me for that ? — , Feb 18 '19 at 11:50
@GingerCSSWizard Thanks a lot for your help, you guided me in right way..... — , Feb 19 '19 at 06:32
@GingerCSSWizard i followed what you suggested & now we cant able to drag the uploaded image in right part of 1st image , please check https://codepen.io/kidsdial/pen/JxxQRv , Here is [video link](https://drive.google.com/file/d/1iqylL4pLNK5YxgWBzS4kjbo8vrLNAJzO/view?usp=sharing) — , Feb 19 '19 at 13:36
@vickeycolors This is because you have two masks that are overlapping you would have to add a bit more logic into the code to check for all masks on the mouse position. — Ginger Wizard, Feb 19 '19 at 21:39
@GingerCSSWizard Thanks, i used [github code](https://github.com/AlenToma/Canvas-Mask) , now in this https://codepen.io/kidsdial/pen/xMNbVz , for some images dragging will not work everytime.... its not happening smoothly...... can you suggest me to make it smoothly ? i am facing problems as in [link](https://drive.google.com/file/d/1CtyKOl1NxbLwTCreuQQuObg7IQstfdgq/view) & [link2](https://drive.google.com/file/d/1V7zuYW-t_yYim2Pq3hjsNvg4upMhbdrl/view) — , Feb 21 '19 at 10:53

Alen.Toma · Accepted Answer · 2019-03-06T15:41:12.480

0

Here you go, added the masked image and was able to determind the click position, inside or outside the image.

Here i made an example with your code at codepen make sure to look at maskedImageUrl

edited Mar 06 '19 at 15:41

answered Feb 18 '19 at 11:26

Alen.Toma

4,684
2
14
31

Thanks for the answer, but i need to combine this feature with my requirement..... means `drag the uploaded image` only in `transparent part`, please help me for that...... – Feb 18 '19 at 11:28
I added an example at codePen with your modified code – Alen.Toma Feb 18 '19 at 13:44
hade to convert the masked image url to base64 so i dont get cross error – Alen.Toma Feb 18 '19 at 13:45
okay, i need to convert all the mask images to `base64` before checking , can we automate it through code? – Feb 18 '19 at 13:47
You dont need to do that, if you have the image on the same server then wont be needing bas64 :) i just did that so you could test and see. – Alen.Toma Feb 18 '19 at 13:50
You will also need to reorganize the code. I wrote it as a test. – Alen.Toma Feb 18 '19 at 13:57

Drag uploaded image only inside Transparent part of the image

1 Answers1