Specification: Free Online Image to ASCII Art Converter

Overview

This single-file web application serves as a high-performance utility for converting raster images (JPG, PNG, WEBP) into ASCII art. It prioritizes user experience with real-time rendering, adjustable parameters, and a clean, accessible interface, entirely without server-side processing.

Technical Architecture

• Core Engine: Vanilla JavaScript using the HTML5 Canvas API for pixel manipulation.
• Architecture: Single-file HTML/CSS/JS architecture.
• State Management: In-memory state storage ONLY. Explicitly no usage of localStorage, sessionStorage, or cookies to comply with strict sandboxing.
• Performance: Pixel processing is debounced to ensure the UI remains responsive while generating ASCII previews.

UI/UX Design

• Aesthetic: Modern, clean "Light Mode" SaaS design. Use white backgrounds (#FFFFFF), slate grey text (#334155), and vibrant blue (#2563EB) for primary actions.
• Layout:
  • Header: Simple, descriptive heading.
  • Control Sidebar: Fixed-width column on the left containing upload zone, resolution sliders (width/height), character density selection, and "Invert Colors" toggle.
  • Display Area: A large, centered canvas container showcasing the generated output in a monospace font (Courier New or Consolas).
• Responsive Behavior: On small screens, the sidebar converts to an accordion menu, and the display area stretches to full width.

Feature List

1. Upload Mechanism: Drag-and-drop zone and standard file input.
2. Customizable Resolution: Range slider for setting the output width (number of characters per line).
3. Character Sets: Dropdown selector to choose between 'Basic' (.,-), 'Detailed' (@#W$9876543210?!abc;:+=-,._ ), and 'Block' (█▓▒░) sets.
4. Real-time Inversion: A toggle switch to invert black/white mapping (useful for dark images).
5. Export Options:
   • Copy to Clipboard button (using the Clipboard API with a custom 'Copied!' toast notification).
   • Download as .txt file (using a Blob URL).
6. Custom Notifications: No alert() or confirm() usage. Implement a custom toast notification system for feedback (e.g., "Copied to clipboard").

Implementation Directives

• No External Servers: Do not perform any API calls. All libraries (e.g., Tailwind CSS) must be fetched via CDN or self-contained.
• Error Handling: Gracefully handle non-image file uploads with a custom UI modal, avoiding browser popups.
• Visual Polish: Utilize smooth CSS transitions (e.g., transition: all 0.3s ease) for UI state changes.
• Browser Support: Ensure compatibility with modern browser canvas implementations.