█████╗ ███████╗ ██████╗██╗██╗ ███╗ ███╗ █████╗ ██╗ ██╗███████╗██████╗ ██╔══██╗██╔════╝██╔════╝██║██║ ████╗ ████║██╔══██╗██║ ██╔╝██╔════╝██╔══██╗ ███████║███████╗██║ ██║██║ ██╔████╔██║███████║█████╔╝ █████╗ ██████╔╝ ██╔══██║╚════██║██║ ██║██║ ██║╚██╔╝██║██╔══██║██╔═██╗ ██╔══╝ ██╔══██╗ ██║ ██║███████║╚██████╗██║██║ ██║ ╚═╝ ██║██║ ██║██║ ██╗███████╗██║ ██║ ╚═╝ ╚═╝╚══════╝ ╚═════╝╚═╝╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝
A modern web application that converts images and text into ASCII art. Built with Next.js 15, TypeScript, Shadcn, and Tailwind CSS.
- Image Upload: Support for multiple image formats (PNG, JPG, JPEG, GIF, WebP)
- Real-time Preview: See your ASCII art generated instantly
- Customizable Settings:
- Adjustable character width (10-200 characters)
- Multiple ASCII character sets (simple, detailed, blocks, custom)
- Color/grayscale toggle
- Fidelity settings (Image only)
- Export Options: Copy to clipboard, download as image, or download as text file
- Responsive Design: Works on desktop and mobile devices
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Image Processing: HTML5 Canvas API
- Deployment: Vercel
Before running this project, make sure you have:
- Node.js 22.0 or later
- npm, yarn, or pnpm package manager
-
Clone the repository
git clone https://github.com/yourusername/ascii-maker.git cd ascii-maker -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000 to see the application.
- Upload an Image: Click the upload area or drag and drop an image file
- Adjust Settings:
- Set the desired width for your ASCII art
- Choose a character set that fits your style
- Fine-tune brightness and contrast
- Toggle between color and grayscale output
- Generate: The ASCII art will be generated automatically as you adjust settings. Text will render canvas art and Figlet fonts.
- Export: Copy the result to clipboard or download as a text file
For optimal performance with large images:
- Recommended max width: 100-150 characters
- Images are automatically resized to maintain aspect ratio
- Processing is done client-side for privacy
The ASCII conversion process:
- Image Loading: Load and validate the uploaded image
- Canvas Rendering: Draw image to HTML5 canvas for pixel manipulation
- Pixel Sampling: Extract pixel data and convert to grayscale values
- Character Mapping: Map brightness values to ASCII characters
- Output Generation: Construct the final ASCII string with proper formatting
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the beautiful UI components
- Lucide for the icon set
- Next.js team for the amazing framework
- Vercel for hosting and deployment
If you have any questions or run into issues, please:
- Check the Issues page
- Create a new issue if your problem isn't already reported
- Provide as much detail as possible including:
- Browser and version
- Steps to reproduce
- Expected vs actual behavior
- Refactor, housekeeping, and performance optimizations
- Batch processing for multiple images
- More character sets and themes
- Selectable character sets
- Animation support for GIFs
- Social sharing features
- API endpoint for programmatic access
Made with ❤️ by Devin