0
208
ViewsCómo fusionar la imagen de una parte del cuerpo en una
Digamos que tengo algunas imágenes de partes del cuerpo para que el usuario las combine como nft.
-images -eyes -blue_eyes.png -red_eyes.png -body -strong_body.png -slim_body.png ... Por ejemplo:
Los usuarios pueden seleccionar diferentes partes del cuerpo para combinar.
Si quiero que los usuarios vean la vista previa del avatar, ¿cómo debo combinar las imágenes de las partes del cuerpo en una como la siguiente, usando javascript ?
2 answers
Answer question0
La única forma que conozco es usarlo con HTML y CSS, así:
en tu html
<div class="wrappingImage"> <img class="overlappingImage" src="body.png"> <img class="overlappingImage" src="eyes.png"> <img class="overlappingImage" src="mouth.png"> </div>En tu CSS
.overlappingImage { position: absolut: top: 0; left: 0; } .wrappingImage { position: relative; } Entonces puede agregar un valor (como este: <img value="1"> ) a sus images y colocarlas en función de este valor en su template después de hacer clic en un botón, por lo que body = 0 , los eyes = 1 y la mouth = 1 .
¡Espero que te ayude!
0
Puede combinar las imágenes usando los paquetes merge-images y canvas de node.js
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();Imágenes de entrada:
Imagen de salida:
