Is this possible?

Ask the community
,
1

Hi! Can I do this in Wix? I have been on Corvid a while now and I don’t know if this is possible or not. Please let me know.

https://getavataaars.com/?accessoriesType=Sunglasses&avatarStyle=Circle&clotheColor=White&clotheType=ShirtVNeck&eyeType=Side&eyebrowType=Default&facialHairColor=BrownDark&facialHairType=BeardLight&hairColor=Brown&hatColor=Blue01&mouthType=Grimace&skinColor=Brown&topType=Hat

2

Hello Haiden,
this part is surely possible…

958×1211 50 KB

this part here…

960×190 9.94 KB

I don’t know :smirk:

By the way, cool idea :grin:

3

So do you know how I could add it on my Wix website?

4

I need to add this for a client.

5

It’s totally possible :ok_hand:

6

Hello Haiden, you were looking for a AVATAR-GENERATOR?

So here you can see a first example of it…
https://russian-dima.wixsite.com/meinewebsite/avatar

7

Perhaps Ahmad can do an example for the second part :wink:

8

I can, but not as an example :wink:
It’ll take a lot of time and I’m kind of busy.

9

Any suggestion/idea how to realize it?
Take a “screenshot”? (possible)?

10

There are many js modules on GitHub that you can use for free to achieve such functionalities

11

Ok, thx. Will take a look.

12

Thank you for your help everyone!

13

@russian-dima Your website does not have the code.

14

Just wanted you to show, that it is possible.
I spend a lot of time to figure out, how to realize it.

Your steps will be the following…

  1. First at all, you have to create some pics/images with fragments of human body and dress (eyes/mouts/ears/hat/sunglases and so on).
    Of course these pics should be in PNG with transparent background.

  2. You will need some DropDowns, as you can see in my example.

I will give you a code-snipet which will show you how to realize it.
This code-snipet is not perfect and hast to be modified, optimized and expanded, but it shows one of the main functions.

export function dropdown2_change(event) {
    xxx = Number($w('#dropdown2').value)
    $w('#dataset2').setCurrentItemIndex(xxx)
 
    setTimeout(()=>{
 if (xxx==0){console.log("00000")
            $w('#IMGeyes').src = $w('#dataset2').getCurrentItem(0).imageUrl
        }
 else {console.log(($w('#dataset2').getCurrentItem().imageUrl))
            $w('#IMGeyes').src = $w('#dataset2').getCurrentItem().imageUrl
        }
    },5)
}

Of course there are better solutions, but better = not 4 free.

  1. You musst also create a database where you can store all the image-links, which will be needed to be switched, when the value of dropdown changes.
15

Ok. Thank you very much. I will be able to figure the rest.

16

hi there! is there any possible way to integrate a custom color picker for each item? so that you could say, have hair that starts grey but you can use an html picker to change it to any color you want?

17

The example you can see here, works with a DATABASE and already prepared PNG-FILES —> EYES, MOUTH, FACE.

You choose an option inside of the dropdown → related data (image) comes out of database.

You can generate your color-picker without any HTML-Component.
You can generate a color-grid - - > using empty-buttons for example.
Each button click would load another PNG-FILE with a related color.
There are many possibilities, how to solve it.

Which could look like…
…similar to this…

By the way… here you will find another custom created color-picker using some Wix-Elements…

https://russian-dima.wixsite.com/login-system/vnbadgemgm