Anonymous-DP V2 : Unique and Random Pixel Profile Picture for Anonymous User

Anonymous-dp V2

https://github.com/RizmyAbdulla/Anonymous-dp/

Anonymous-dp updated !!!

Many new features are unlocked in this version.

features

• Obtaining the initial letters from the user's first name and last name and drawing them at the center of the display picture (DP).

• Applying any color to the initial letters.

• The initial letters also automatically adjust their color based on the background, using complementary function.

• Adjustable font size of initial letters.

• Adjustable font color of initial letters.

• Random Colors for DP and initial letters in mode 3.

Features	Mode-1	Mode-2	Mode-3
Background Pattern	☑	☑	☒
Initial letters	☒	☑	☒
background solid color	☒	☒	☑
random profile picture Color	☒	☒	☑
random letter Color	☒	☑	☑
complementary letter color	☒	☑	☑
manual letter color	☒	☑	☑

docs

• Live Previews

  • Home Page
  • mode-1
  • mode-2
  • mode-3

• Anonymous-dp Intergration

  • via CDN
  • via Locally

• Using Anonymous-dp in HTML webpage

  • Supported-Classes
  • Elements
  • Showing First & Last Name in a Element
  • Canvas
  • Modes
  • Font-size
  • Complementary color
  • Creating Functional Elements
  • Save button
  • Regenerate Button
  • Name Editor Inputs
  • Color Picker Radio

• Developer Note

Live Preview

Home Page

Live preview available on :
https://rizmyabdulla.github.io/Anonymous-dp/demo/mode1.html

Mode-1

Live preview available on :
https://rizmyabdulla.github.io/Anonymous-dp/demo/mode1.html

Mode-2

Live preview available on :
https://rizmyabdulla.github.io/Anonymous-dp/demo/mode2.html

Mode-3

Live preview available on :
https://rizmyabdulla.github.io/Anonymous-dp/demo/mode3.html

Anonymous-dp Intergration

Via CDN

you can intergrate Anonymous-dp from CDN (jsdeliver)

import javascript code via :
https://cdn.jsdelivr.net/gh/RizmyAbdulla/Anonymous-dp@main/Anonymous-dp.js

<script src="https://cdn.jsdelivr.net/gh/RizmyAbdulla/Anonymous-dp@main/js/Anonymous-dp.js

Via Locally

you can intergrate Anonymous-dp by Downloading js files

import javascript code :
path/to/Anonymous-dp.js

<script src="path/to/Anonymous-dp.js"></script>

Using Anonymous-dp in HTML webpage

Supported Classes For Canvas

Classes	Mode-1	Mode-2	Mode-3
profile-font-color-{hex color code}	☒	☑	☑
profile-font-size-{1-10}	☒	☑	☑
profile-font-complementary	☒	☑	☒
profile-random-dp-color	☒	☒	☑
profile-random-font-color	☒	☑	☑

Elements

Showing First & Last Name in a Element

Mode-1 needs two text element with profile-fname and profile-lname classes to get initial letters.

<p class="profile-fname">Rizmy</p>
<p class="profile-lname">Abdulla</p>

Canvas

Modes

our Canvas(profile picture) has three modes classes,mode-1,mode-2 and mode-3 .lets put all together.

using mode-1 class

<canvas id="profile-picture"
        class="mode-1"
        width="200"
        height="200">
</canvas>

using mode-2 class

<canvas id="profile-picture"
        class="mode-2 profile-font-size-7 profile-font-Complementary
        width="200"
        height="200">
</canvas>

using mode-3 class

<canvas id="profile-picture"
        class="mode-3 profile-font-size-7 profile-font-color-433656"
        width="200"
        height="200">
</canvas>

Font-size

We can use profile-font-size-7 class to adjust initial letters on profile picture.

supported modes : mode-2,mode-3

<canvas id="profile-picture"
        class="mode-3 profile-font-size-7
        width="200"
        height="200">
</canvas>

Complementary color

We can use profile-font-Complementary class to auto assign reliable color for initial letters according to Background color on profile picture.

supported modes : mode-2,mode-3

Note: In mode-3,Complementary color can be apply for initial letters When Profile Picture is set to profile-random-dp-color

<canvas id="profile-picture"
        class="mode-3 profile-font-Complementary profile-random-dp-color"
        width="200"
        height="200">
</canvas>

Creating Functional Elements

Save button

Use profile-save-dp id to save the DP.

<button id="profile-save-dp">Save DP</button>

Regenerate Button

Use profile-generate-dp id to Regenerate a DP.

<button id="profile-generate-dp">Generate DP</button>

Name Editor Inputs

Use profile-fname-input and profile-lname-input classes name to Edit UserName

<input type="text" class="profile-fname-input" placeholder="first name" />
<input type="text" class="profile-lname-input" placeholder="last name" />

Color Picker Button

Use profile-color-picker to Pick a color for initial Letters.

<input type="color" id="profile-color-picker" />

Developer Note

If you find this project useful or interesting, please consider giving it a star on GitHub by clicking the Star button at the top. Your support is greatly appreciated! ❤

Contributions are welcome! If you find any bugs or want to improve the project, please open an issue or submit a pull request. Make sure to follow the contribution guidelines mentioned in the repository.

Comments

[Waleedh Nihal]

This is an awsome project what tech stack did you use?