Create User Avatar from User Name

Hello Everyone…
Today I will show you how you can create user avatar by using User names. There is already an extension present for this purpose but I prefer to use this method because that extension has some issues which are not currently resolved.

So you can use this method as an alternative to that extension. One more thing that you can also download the avatars created and this function is not present in the extension.

Online Method

Components :

  1. Image
  2. Spaces
  3. Buttons
  4. Web
  5. TextBox
  6. Label
  7. Network
  8. Notifier
  9. Switches
  10. Spinner

Initial Designer View

Annotation 2020-07-24 121557

Blocks

Result :

The blocks are really simple and easy. Just experiment with them. You will surely create much better than this one.
Website: https://ui-avatars.com/
AIA File : Avatars.aia (4.8 KB)
Apk File : Avatars.apk (5.2 MB)

Offline Method
This is the offline method created by @Zia_Choudhary.
Jump to main topic :

Initial Designer View
Annotation 2020-07-24 184100

Blocks :

Result
31343a16dea3c44aceada89d2fb522f97171036e_2_225x500

For downloading AIA and APK file, visit the post

Thanks to @Zia_Choudhary for the Offline method

11 Likes

Nice guide :ok_hand:

1 Like

Great work… :heart:Keep it up

1 Like

Nice guide :ok_hand:

1 Like

Nice Guide :hugs::clap:. Thanks for this :smiley:

1 Like

Nice guide @zainulhassan :heart_eyes::heart_eyes:

1 Like

I have a suggestion… Here we use web component but it can be created with canvas component too that can work even offline… U can also add that method too in this guide…that’s also very simple… This api is taking first two letters of a name… So this can be done very easily with text separate blocks and canvas m i right?

1 Like

Thanks. I will try with Canvas

Hi @zainulhassan i have created offline avatar creator logic for you
you can add it in your guide :innocent:
Here is the extension that i used
Component To Image Extension

ScreenShot

Downloads

AvatarCreator.apk (5.1 MB)
AvatarCreator.aia (12.5 KB)

2 Likes

Can we create transparent images I mean .png format with this???

1 Like

Yes You can by just adding .pnj after image name in save as method of this extension’s block.

1 Like

No I mean the images generated will have a transparent background???

1 Like

In my blocks its not possible…but it can be created by setting background to transparent colour or by setting text colour to transparent. its not a difficult task .

1 Like

You r welcome. :blush:

1 Like