Avatar Editor for LancairTalk.net

A web application that helps users create and edit avatars for their LancairTalk.net profiles. The application allows users to:

• Upload images of any size
• Crop and position the image
• Add rounded corners
• Add customizable borders
• Preview the final result
• Download the processed avatar

Features

• Image cropping with aspect ratio lock (1:1)
• Border radius adjustment (0-50px)
• Border width adjustment (0-5px)
• Border color picker
• Real-time preview
• Automatic image compression
• Final output size: 110x110 pixels

Setup

1. Install dependencies:

npm install

2. Start the development server:

npm start

3. Open http://localhost:3000 to view the app in your browser.

Usage

1. Click the file input to upload an image
2. Use the crop tool to position your image
3. Adjust the border radius using the slider
4. Add a border if desired (width and color)
5. Preview the result in the small preview box
6. Click "Download Avatar" to save the processed image
7. Upload the downloaded image to your LancairTalk.net profile

Technical Details

• Built with React and TypeScript
• Uses react-image-crop for image manipulation
• Implements browser-image-compression for file size optimization
• Styled with styled-components
• Color picker from react-color