Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

202
Visualizações
How to merge body part image into one

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:
enter image description here

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?

enter image description here

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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

In your HTML

<div class="wrappingImage">
  <img class="overlappingImage" src="body.png">
  <img class="overlappingImage" src="eyes.png">
  <img class="overlappingImage" 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!

about 4 years ago · Juan Pablo Isaza Relatório

0

You can combine the images using node.js packages merge-images and canvas.

const mergeImages = require('merge-images');
const { Canvas, Image } = require('canvas');
const fs = require('fs');

const run = async () => {
    const outputBase64 = await mergeImages(['./body.png', './eyes.png', './mouth.png'], {
        Canvas: Canvas,
        Image: Image
    });

    fs.writeFileSync(
        './output.png',
        outputBase64.replace(/^data:image\/png;base64,/, ''), // remove the base64 prefix
        {'encoding': 'base64'}
    );
}

run();

Input images:

body eyes mouth

Output image:

output

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda