Move one image inside other image

Asked 25/1, 2019 at 11:16 Answered 31/1, 2019 at 19:24

Solved html css css-mask

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

Guidon answered 25/1, 2019 at 11:16 Comment(4)

Is it ok to use jquary library ? – Mourning 28/1, 2019 at 5:31

@Mourning sure, we can use it..... – Guidon 28/1, 2019 at 5:35

Hope this might help http://usefulangle.com/post/1/jquery-dragging-image-within-div – Matabele 28/1, 2019 at 7:19

@AkashPreet Thanks for the link , I tried that link code , but it didt worked : jsfiddle.net/2Lp14hke , also what i am trying is to move the uploaded image inside mask image similar to this link – Guidon 28/1, 2019 at 7:27

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.

Mourning answered 28/1, 2019 at 7:32 Comment(11)

Thanks, its working fine in fiddle & i will surely accept your answer, but when i tried your code in website , code is not working, what wrong i done there ? – Guidon 28/1, 2019 at 7:56

what do you mean its not working? is it in your website ? – Mourning 28/1, 2019 at 8:1

in the link the uploaded image is not moving freely as compared to fiddle...... please check what wrong i am done ? – Guidon 28/1, 2019 at 8:3

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. – Mourning 28/1, 2019 at 8: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 – Guidon 28/1, 2019 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. – Mourning 28/1, 2019 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 <div id="slider"></div> code after i upload photo as pastebin.com/Uh1y8nXV , i am using your javascript code at the end of the page..... – Guidon 28/1, 2019 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). – Mourning 28/1, 2019 at 11:3

Let us continue the discussion in chat : chat.stackoverflow.com/rooms/187413/… – Guidon 31/1, 2019 at 7:28

As you said, i removed the other draggable code & used only your code, but still dragging is not happening, please check website & join chat – Guidon 31/1, 2019 at 11:56

Can we override the dragging related code of website by your code, is that possible ? – Guidon 1/2, 2019 at 7:56

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

Senate answered 29/1, 2019 at 5:51 Comment(5)

i added your code to .photo_holder , here is website link , uploaded image is moving inside mask image , but not moving clearly..... – Guidon 29/1, 2019 at 5:57

Are you searching for image resize and rotate? – Senate 29/1, 2019 at 6:4

no, i cant able to move the uploaded image smoothly in website as compared in codepen : 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...... – Guidon 29/1, 2019 at 6:6

Have you tried same JS code as code pane in your website? – Senate 29/1, 2019 at 6:21

Let us continue this discussion in chat – Guidon 31/1, 2019 at 12:10

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

Antisthenes answered 28/1, 2019 at 8:47 Comment(9)

When i drag the image to below, it will cut the uploaded image and mask image as here : prntscr.com/md5cel , please check from your side.... but it should be like this : prntscr.com/md5df0 – Guidon 28/1, 2019 at 9: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... – Antisthenes 28/1, 2019 at 9:22

the mask image should be fixed, it should not hide when i move the uploaded image , something like this : prntscr.com/md5df0 I removed the background-size:cover, but still same resuult..... – Guidon 28/1, 2019 at 9:24

You can add background-color: white; - updating my answer – Antisthenes 28/1, 2019 at 9:26

please check website link & 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 ? – Guidon 28/1, 2019 at 9: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 – Antisthenes 28/1, 2019 at 9:47

Let us continue this discussion in chat. – Guidon 28/1, 2019 at 9:47

we are not using any other page, your code works fine bit, means i can move the image little bit as in website, but not smoothly as like other link – Guidon 28/1, 2019 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) – Antisthenes 28/1, 2019 at 14:0

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

Kast answered 30/1, 2019 at 12:33 Comment(7)

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..... – Guidon 30/1, 2019 at 12:46

Yes it can be with some modifications i've did it on this fork codepen.io/anon/pen/yZVPrp – Kast 30/1, 2019 at 13:1

Thanks for update, i added background-color : white; for your codepen , here is updated pen : codepen.io/anon/pen/aXBqRw , i tried the code in website , 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 – Guidon 30/1, 2019 at 13:28

in website there is a code

<img style="width: auto; height: 100%; transform: matrix(1, 0, 0, 1, -13, -20); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: none 0s ease 0s;">

may be is this code is conflicting with your code ? this code is coming from this file , but i am not getting which code i need to remove in that file to make your code work....... – Guidon 30/1, 2019 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; } – Kast 31/1, 2019 at 5:55

I updated your code in website , zoom in & zoom out is working through mouse scroll bar, but i cant able to drag the uploaded image clearly..... please check..... – Guidon 31/1, 2019 at 6:9

Please join chat : chat.stackoverflow.com/rooms/187466/… – Guidon 31/1, 2019 at 7:42

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

Airel answered 31/1, 2019 at 19:24 Comment(10)

okay, i was worrying about masking , i think we can solve this one by clipping ? – Guidon 1/2, 2019 at 5: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. – Airel 1/2, 2019 at 9:5

what you said is gold , but our boss did't agreed as we are going to use same images in mobile app and website...... – Guidon 1/2, 2019 at 9:6

is there any coding hack to do that ? all i wanted is reverse of what i am doing now.... – Guidon 1/2, 2019 at 9:7

How about using Javascript to replace the white part of the mask with a transparent color? check this thread out! https://mcmap.net/q/721849/-replace-a-specific-color-by-another-in-an-image-sprite/7090136 – Airel 1/2, 2019 at 9:11

white part means are you telling inside can or outside can in this image : i.sstatic.net/yJ0s6.png – Guidon 1/2, 2019 at 9: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! – Airel 1/2, 2019 at 9:25

Just to make a clipping mask. Making inside transparent will let the image behind to be seen, just like a png image. – Airel 1/2, 2019 at 9:26

Let us continue this discussion in chat. – Guidon 1/2, 2019 at 9:28

Thanks for your time, i followed codepen in answer & updated with other images- i got reasult as : 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 : codepen.io/anon/pen/ZwyJKe , here i cant drag the uploaded image inside mask image..... – Guidon 4/2, 2019 at 5:49

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags