Move one image inside other image

Question

Background

I am allowing user to upload an image inside mask image....

Once user upload image, I am filling user uploaded i

Answer 1

I made a few changes to your design. its a small change to the html and css. The new html layout is like this

  <div class="image-holder">
  <img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" alt="">
  </div>

where image-holder div is the mask image and the image inside it, is the user uploaded image

I made a demo have a look here

Note for draggable to work you need jQuery.ui installed, and I think that you already using it in your site.

Answer 2

check this link out, might help you. What you want is called a "Clipping Mask". https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths

EDIT: Here's some magic. You're welcome!

Codepen: https://codepen.io/anon/pen/zeZMLz

Answer 3

I used the uploaded image as background image of a div, then moved the background position according to the move drag. The initial position is set to "0px 0px". Written in pure JS, You probably can make it shorter if you choose to use a JS library that handles the drag.

<div id="draggable" draggable="true" style="background-position: 0px 0px;"></div>

Example here

Answer 4

You need the image to be draggable so first we need a container for it to be wrapper to listen to the dragover event and listen to the dragstart event on the image itself hence we able to calculate the drag distance and apply it as css translation Please check the following pen i've forked it from yours and apply the changes also I've added listen to onwheel event and apply zoom in and zoom out for the image and on same way

I recommend you to apply flip horizontal and flip vertical and image rotation

enter code here

https://codepen.io/anon/pen/yZVPrp

Answer 5

Please remove below CSS code from .photo_holder img and write on .photo_holde. Like this:

.photo_holde {
    -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
    mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
 }