preview features : https://rizmyabdulla.github.io/Anonymous-dp/index.html
-
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 | ☒ | ☑ | ☑ |
The following documentation provides a comprehensive guide on how to customize and personalize a user's profile, including generating a display picture (DP), changing text, and adjusting colors using JavaScript. This documentation is intended for developers and users interested in implementing profile customization features.
- Introduction
- Prerequisites
- Initialization
- Profile Customization
- Events and Interactions
- Canvas Modes
- Customization Functions
This documentation explains how to create a user profile customization system that allows users to personalize their profile pictures, text, and colors. The system is built using JavaScript and HTML5 Canvas for creating dynamic display pictures.
Before you implement the profile customization features, ensure you have the following elements in your HTML:
profile-name: The element that displays the user's name.profile-color-picker: An input element for selecting text color.profile-generate-dp: A button for generating the display picture.profile-save-dp: A button for saving the display picture.profile-cname-btn: A button to change the name.profile-name-submit: A button to submit the changed name.profile-picture: The HTML5 canvas element for rendering the display picture.profile-fname-input: An input element for the first name.profile-lname-input: An input element for the last name.profile-font-color-xxx: CSS classes for specifying custom font color.profile-font-complementary: CSS class for complementary font color.profile-random-font-color: CSS class for random font color.profile-font-size-xx: CSS classes for specifying custom font size.profile-dp-color-xxx: CSS classes for specifying custom display picture background color.profile-random-dp-color: CSS class for random display picture background color.
The profile customization system is initialized when the DOM is ready. To ensure this, an event listener is added for the DOMContentLoaded event. The system retrieves necessary DOM elements and initializes the HTML5 canvas.
In Mode 1, a random color pattern is generated and displayed on the canvas. The user's name is not used in this mode. To create a random color pattern, the system generates random colors and fills the canvas with rectangles of random colors.
In Mode 2, the user's initials are displayed on the canvas. The system generates a random color pattern as a background and sets the font color based on the selected color or other customization options.
Mode 3 combines a colored background with user initials. The background color and font color can be customized based on user preferences.
Users can generate and save their display pictures by clicking the "Generate DP" and "Save DP" buttons, respectively. The system generates the DP on the canvas and allows users to save it as an image.
Users can select a custom text color using the color picker input. The text color is applied to the user's name and initials.
Users can change their displayed name by clicking the "Change Name" button. They can input their first and last names and submit the changes by clicking the "Submit" button.
The profile customization system supports three canvas modes: Mode 1, Mode 2, and Mode 3. Each mode provides different customization options. To change the canvas mode, add a class to the canvas element. The class names are "mode-1," "mode-2," and "mode-3."
The system includes various functions for customization, such as generating random colors and calculating complementary colors for text. These functions enable dynamic display picture creation based on user preferences.
For specific implementation details and usage examples, please refer to the code comments and the HTML structure of your project.