How to merge body part image into one-CodePudding

Let's say I have some body part images for user to merge it as nft.

-images
 -eyes
  -blue_eyes.png
  -red_eyes.png
 -body
  -strong_body.png
  -slim_body.png
...

For example:

Users can select different body parts to combine.

If I want to let users to see the preview of the avatar, how should I combine the body part images into one like below, using javascript?

CodePudding user response：

The only way I know is to use it with HTML and CSS, like this:

In your HTML

<div class="wrappingImage">
  <img  src="body.png">
  <img  src="eyes.png">
  <img  src="mouth.png">
</div>

In your CSS

.overlappingImage {
  position: absolut:
  top: 0;
  left: 0;
}

.wrappingImage {
  position: relative;
}

Than you can add a value (like this: <img value="1">) to your images and place them based on this value in your template after clicking a button - so let body = 0, eyes = 1 and mouth = 1.

Hopefully it helps you out!

CodePudding user response：

You can combine the images using node.js packages

Output image: