Move one image inside other image

问题

Background

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

Once user upload image, I am filling user uploaded image inside mask image :

1.Mask image :

2.user uploaded image :

3.User uploaded image on mask [Final image ] :

Codepen : https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle : http://jsfiddle.net/2xq8p0zy/

Html

<body>
  <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>

css

body {
  background-color: #111;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 500px;
  -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Requirement:

I want to give an option to move the user uploaded image inside mask image as in this fiddle :

http://jsfiddle.net/aLcb4sb5/ or link

Issue :

but currenly in website both images are moving....

回答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.

回答2:

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

回答3:

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;
 }

回答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

回答5:

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

来源：https://stackoverflow.com/questions/54364232/move-one-image-inside-other-image

标签

html

css

html5

css3

mask