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

Hope this might help [http://usefulangle.com/post/1/jquery-dragging-image-within-div](http://usefulangle.com/post/1/jquery-dragging-image-within-div) — Akash Preet, Jan 28 '19 at 07:19
@AkashPreet Thanks for the link , I tried that link code , but it didt worked : http://jsfiddle.net/2Lp14hke/ , also what i am trying is to move the uploaded image inside mask image similar to [this link](https://www.greetingsisland.com/design/invitations/surrealism-balloons/201-14150) — , Jan 28 '19 at 07:27

score 6 · Accepted Answer · edited Feb 01 '19 at 17:13

6

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.

edited Feb 01 '19 at 17:13

marc_s

732,580
175
1,330
1,459

answered Jan 28 '19 at 07:32

Alen.Toma

4,684
2
14
31

Thanks, its working fine in fiddle & i will surely accept your answer, but when i tried your code in [website](http://139.59.24.243/ecom1/site/six/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#) , code is not working, what wrong i done there ? – Jan 28 '19 at 07:56
what do you mean its not working? is it in your website ? – Alen.Toma Jan 28 '19 at 08:01
in the [link](http://139.59.24.243/ecom1/site/six/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#) the uploaded image is not moving freely as compared to fiddle...... please check what wrong i am done ? – Jan 28 '19 at 08:03
ok i hade a look, and you are using `transform: matrix(1, 0, 0, 1, 0, -20);` to handle the drag event. you dont need it. just use the ui draggable. so you have to remove the code that generate `transform: matrix(1, 0, 0, 1, 0, -20);` and add `img.draggable` instead. – Alen.Toma Jan 28 '19 at 08:10
i removed `transform: matrix(1, 0, 0, 1, 0, -20);` through inspect element, but still i cant able to move the uploaded image easily inside mask image, please check [website](http://139.59.24.243/ecom1/site/six/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#) – Jan 28 '19 at 10:24
You did not remove it. Debug like this click on F12 on chrome. and then select the image by inspecting it. then try to drag the image. you will see the in the css side bar that `transform: matrix(1, 0, 0, 1, 0, -20);` is changing and then there is the draggable event you have to bind it after the upload and not before $(".image-holder").find("img").draggable();. you are binding it at the page load when there is not even a single image. when your upload image is finished then you bind the events slider and the draggable. – Alen.Toma Jan 28 '19 at 10:40
`transform: matrix(1, 0, 0, 1, 0, -20);` is not present in code, is that generating from browser ? also that `transform : matrix` code is not there in `view page source` , i am not getting how to remove that.... i am using `
` code after i upload photo as https://pastebin.com/Uh1y8nXV , i am using your javascript code at the end of the page..... – Jan 28 '19 at 10:53
The code you have at the end trigger when the page load for the firsttime. When page load the firsttime the user has not added any image so your function dose not do anything at the end of the page. 'transform: matrix(1, 0, 0, 1, 0, -20);' will find it at the css style section for the image you uploaded. I could not look into the js files as it has boundle. set the application as debug so i could look att the js files and see where the upload is happning(if i could find it i may help you more how to edit the code). – Alen.Toma Jan 28 '19 at 11:03
Let us continue the discussion in chat : https://chat.stackoverflow.com/rooms/187413/discussion-between-vickey-colors-and-alen-toma – Jan 31 '19 at 07:28
As you said, i removed the other draggable code & used only your code, but still dragging is not happening, please check [website](http://139.59.24.243/ecom1/site/six/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) & join [chat](https://chat.stackoverflow.com/rooms/187413/discussion-between-vickey-colors-and-alen-toma) – Jan 31 '19 at 11:56
Can we override the dragging related code of website by your code, is that possible ? – Feb 01 '19 at 07:56

score 2 · Answer 2 · answered Jan 29 '19 at 05:51

2

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

answered Jan 29 '19 at 05:51

Joykal Infotech

1,840
3
9
17

i added your code to `.photo_holder` , here is [website link](http://139.59.24.243/ecom1/site/nine/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#) , uploaded image is moving inside mask image , but not moving clearly..... – Jan 29 '19 at 05:57
Are you searching for image resize and rotate? – Joykal Infotech Jan 29 '19 at 06:04
no, i cant able to move the uploaded image smoothly in [website](http://139.59.24.243/ecom1/site/nine/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#) as compared in codepen : https://codepen.io/AlenToma/pen/PVNvdq , please upload image in both website and in codepen, you can see in codepen image can be draggable clealry , but in website it is restricted...... – Jan 29 '19 at 06:06
Have you tried same JS code as code pane in your website? – Joykal Infotech Jan 29 '19 at 06:21
[Let us continue this discussion in chat](https://chat.stackoverflow.com/rooms/187466/discussion-between-vickey-colors-and-joykal-infotech) – Jan 31 '19 at 12:10

Itay Gal · Answer 3 · 2019-01-28T09:27:03.957

1

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

edited Jan 28 '19 at 09:27

answered Jan 28 '19 at 08:47

Itay Gal

10,706
6
36
75

When i drag the image to below, it will cut the uploaded image and mask image as here : http://prntscr.com/md5cel , please check from your side.... but it should be like this : http://prntscr.com/md5df0 – Jan 28 '19 at 09:19
What did you expect when dragging the image to the bottom? You can remove the `background-size: cover;` so the image will be at full size, if that helps. It works the same in the example you provided... – Itay Gal Jan 28 '19 at 09:22
the mask image should be fixed, it should not hide when i move the uploaded image , something like this : http://prntscr.com/md5df0 I removed the `background-size:cover`, but still same resuult..... – Jan 28 '19 at 09:24
You can add `background-color: white;` - updating my answer – Itay Gal Jan 28 '19 at 09:26
please check [website link](http://139.59.24.243/ecom1/site/seven/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#) & upload image , i can able to move the uploaded image inside mask image, but instead of displaying `uploaded image inside mask image`, its displaying `final image inside mask image` , please tell me what i need to correct this ? – Jan 28 '19 at 09:44
You're doing some processing on the image, not related to my code. You probably need to apply this processing only when the user go to the next page – Itay Gal Jan 28 '19 at 09:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187415/discussion-between-vickey-colors-and-itay-gal). – Jan 28 '19 at 09:47
we are not using any other page, your code works fine bit, means i can move the image little bit as in [website](http://139.59.24.243/ecom1/site/seven/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#), but not smoothly as like [other link](https://www.greetingsisland.com/design/invitations/surrealism-balloons/201-14150) – Jan 28 '19 at 13:55
As much as I'd like to help, your question is too broad, you need to create an example code of what you're trying to do and describe the bug or difficulty you have. I suggest doing that in a different question as this question was answered (actually you even got 2 solutions to choose from) – Itay Gal Jan 28 '19 at 14:00

score 1 · Answer 4 · answered Jan 30 '19 at 12:33

1

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

answered Jan 30 '19 at 12:33

Mina paulis

392
3
14

in your code, you added `draggable="true" ondragstart="onDragStart(event)" id="uploadedImg"` to `img` tag , is it possible to add these to any other `div` tag, because i don't have option to add those to `img ` tag in my website , because `img` is coming from some other third party code, still i can't able to find from where that `img` tag is coming..... – Jan 30 '19 at 12:46
Yes it can be with some modifications i've did it on this fork https://codepen.io/anon/pen/yZVPrp – Mina paulis Jan 30 '19 at 13:01
Thanks for update, i added background-color : white; for your codepen , here is updated pen : https://codepen.io/anon/pen/aXBqRw , i tried the code in [website](http://139.59.24.243/ecom1/site/20/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) , i can able to move the `uploaded image` inside `mask image` , but not that much fluently compared to codepen..... can you please check [website and upload image once](http://139.59.24.243/ecom1/site/20/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) – Jan 30 '19 at 13:28
in website there is a code `` may be is this code is conflicting with your code ? this code is coming from [this file](http://139.59.24.243/ecom1/site/20/www.greetingsisland.com/bundles/editor.js) , but i am not getting which code i need to remove in that file to make your code work....... – Jan 30 '19 at 13:59
On your code the image defined before it's not uploaded yet so remove this line const img = document.querySelector('#uploadedImg img'); And update the function updateStyle to be function updateStyle() { let transform = "translate(" +translateX+ "px, "+ translateY + "px) scale("+scale+")"; if(document.querySelector('#uploadedImg img'))document.querySelector('#uploadedImg img').style.transform = transform; } – Mina paulis Jan 31 '19 at 05:55
I updated your code in [website](http://139.59.24.243/ecom1/site/20/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html) , zoom in & zoom out is working through mouse scroll bar, but i cant able to drag the uploaded image clearly..... please check..... – Jan 31 '19 at 06:09
Please join chat : https://chat.stackoverflow.com/rooms/187466/discussion-between-vickey-colors-and-joykal-infotech – Jan 31 '19 at 07:42

Chris · Answer 5 · 2019-02-01T14:25:56.653

1

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

edited Feb 01 '19 at 14:25

answered Jan 31 '19 at 19:24

Chris

165
3
12

okay, i was worrying about masking , i think we can solve [this one](https://stackoverflow.com/questions/54345599/overlapping-happening-instead-of-uploading-image-on-mask) by clipping ? – Feb 01 '19 at 05:42
Hmm, actually for that other situation I see a solution by replacing the mask with a PNG that is transparent on the inside. And just put the user image behind it with z-index. It doesn't have to be that complicated. – Chris Feb 01 '19 at 09:05
what you said is `gold` , but our boss did't agreed as we are going to use same images in mobile app and website...... – Feb 01 '19 at 09:06
is there any coding hack to do that ? all i wanted is reverse of what i am doing now.... – Feb 01 '19 at 09:07
How about using Javascript to replace the white part of the mask with a transparent color? check this thread out! https://stackoverflow.com/q/16228048/7090136 – Chris Feb 01 '19 at 09:11
white part means are you telling `inside can or outside can` in this image : https://i.stack.imgur.com/yJ0s6.png – Feb 01 '19 at 09:17
I mean the white part, inside. And the outside to be replaced by another color like white or something so that it looks nice, hehe! – Chris Feb 01 '19 at 09:25
Just to make a clipping mask. Making inside transparent will let the image behind to be seen, just like a png image. – Chris Feb 01 '19 at 09:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187720/discussion-between-vickey-colors-and-chris). – Feb 01 '19 at 09:28
Thanks for your time, i followed codepen in answer & updated with other images- i got reasult as : https://codepen.io/anon/pen/qgjXqo here both mask image and other image displaying separately, also i tried the code that you uploaded in google drive , i got this result : https://codepen.io/anon/pen/ZwyJKe , here i cant drag the uploaded image inside mask image..... – Feb 04 '19 at 05:49

Move one image inside other image

5 Answers5

Linked