Image to ASCII
Drop in a photo, get it back as text you can copy.
BeginnerWeb appCreative4–10hAI-buildable 5/5no setup
Sample an image's pixels, map brightness to a character ramp, and render the result as monospace text. Adjustable resolution and character sets make it playful, and the pixel-sampling work is a clean introduction to canvas image data.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Load an image by drop or file picker
- Brightness maps to characters from a selectable ramp
- Output resolution is adjustable
- The result renders as selectable, copyable text
- Aspect ratio is corrected for character cell proportions
- A copy button puts the whole thing on the clipboard
The interesting part
- Character cells aren't square, so aspect correction is required
- Sampling large images without freezing the tab
- Choosing a character ramp that actually reads as tonal
Once it works
- Add coloured ASCII output as HTML
- Add edge-detection mode using directional characters
- Convert a short video frame by frame
Suggested stack
reacttypescripttailwindcanvas-api