Move One Image Inside Other Image

Move one image inside other image

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="Sample Image">
  </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.

How to move one image on top of other image circularly

I'd say you don't really need JavaScript and cloning for it. You can get away with simple @keyframe animations, animating the background-position as long as you get the correct value for repeating the loop continuously (48.1vw, in the example below - of course, it can be any multiple i.e.: 96.2vw), to match the ratio of the image you use. For example:

.animator {

  background-color: #eee;

  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/car.svg);

  resize: both;

  overflow: hidden;

  animation: move-background 3s linear infinite;

  padding-bottom: 25%;

  width: 100%;

  background-size: contain;

}

body {

  padding: 0;

  margin: 0;

  font-family: sans-serif;

}

@keyframes move-background {

  0% {

    background-position: 0vw, 0%;

  }

  100% {

    background-position: 48.1vw, 0%;

  }

}

<div class="animator"></div>

How do I position one image on top of another in HTML?

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

Moving an image inside in other frame image android

http://stacktips.com/tutorials/android/how-to-drag-a-view-in-android

OR

how to drag an image by touching in android?
hope it helps..

Positioning and overlaying image on another image

Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.

How to put images on another image in order?

I assume some template like this:

The "final image" has dimensions (1920, 1080) (cf. your calculations on xoff and yoff). Since you wrote, you want to keep the aspect ratio for each "single image", you'd need to check both cases: Resize w.r.t. to the single image's width, and if the resulting height is too large, re-resize w.r.t. to the single image's height.

What's left is to track the number of single images per final image inside the loop, and set up proper xoff and yoff values for each of the three cases. Maybe, looking at the code here helps more than long explanations:

import cv2
import numpy as np
import os

folder = 'path/to/your/images'
image_paths = []
for path, subdirs, files in os.walk(folder):
    for filename in files:
        f = os.path.join(path, filename)
        if f.endswith((".jpg", ".png", ".JPG", ".PNG", ".jpeg", ".JPEG")):
            image_paths.append(f)

d = 0                                               # Final image counter
e = 0                                               # Single image counter
back = np.ones((1080, 1920, 3), np.uint8) * 255     # Background
result = back.copy()                                # Final image
for i, image in enumerate(image_paths):

    # Read image
    image = cv2.imread(image)
    h, w = image.shape[:2]

    # First two single images: Enforce subimage with h_max = 480 and w_max = 900
    if e <= 1:
        r = 900.0 / w
        dim = (900, int(h * r))
        if dim[1] > 480:
            r = 480.0 / h
            dim = (int(w * r), 480)
        resized = cv2.resize(image, dim)
        hr, wr = resized.shape[:2]
        x_off = 40
        if e == 0:
            y_off = 40
        else:
            y_off = 560

    # Third single image: Enforce subimage with h_max = 1000 and w_max = 900
    else:
        r = 900.0 / w
        dim = (900, int(h * r))
        if dim[1] > 1000:
            r = 1000.0 / h
            dim = (int(w * r), 1000)
        resized = cv2.resize(image, dim)
        hr, wr = resized.shape[:2]
        x_off, y_off = 980, 40

    # Add single image to final image
    result[y_off:y_off + hr, x_off:x_off + wr] = resized

    # Increment single image counter
    e += 1

    # After three single images: Write final image; start new final image
    if (e == 3) or (i == (len(image_paths) - 1)):
        cv2.imwrite('resized_centered_%d.jpg' % d, result)
        result = back.copy()
        d += 1
        e = 0

For some random images from my StackOverflow archive, I get the following outputs:

If you want to have different sized boxes or margins around or between the single images, just adapt the corresponding values in the code.

----------------------------------------
System information
----------------------------------------
Platform:      Windows-10-10.0.16299-SP0
Python:        3.9.1
PyCharm:       2021.1.1
NumPy:         1.20.2
OpenCV:        4.5.1
----------------------------------------

I have 5 images inside a div, and how can i move the position of a clicked image so that it moves to become the very first image inside the div?

Simply remove the clicked element using removeChild() and insert the same as new element.

var img_wrapper = document.getElementById('img_wrapper');

var el = img_wrapper.getElementsByTagName('img');

for(var i = 0; i < el.length; i++) {

  el[i].addEventListener("click", shuffleImages);

}

function shuffleImages(e) {

  var selected_img = e.target;

  img_wrapper.removeChild(selected_img);

  img_wrapper.insertBefore(selected_img, img_wrapper.firstChild);

}

<div id="img_wrapper">

  <img src="http://via.placeholder.com/100x100&&text=1" />

  <img src="http://via.placeholder.com/100x100&&text=2" />

  <img src="http://via.placeholder.com/100x100&&text=3" />

  <img src="http://via.placeholder.com/100x100&&text=4" />

  <img src="http://via.placeholder.com/100x100&&text=5" />

</div>

HTML, CSS - image inside image, how to do that?

Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail

see this fiddle: http://jsfiddle.net/cRqhT/3/

border and image size are defined for simplicity

---

Related Topics