Image to ASCII Art
Convert any image into text-based ASCII art.
Image to ASCII converts photos into text-based ASCII art — the card says it plainly: "Convert any image into text-based ASCII art." Conversion auto-runs on file select with defaults (width 100, Simple charset), showing "Converting to ASCII..." while sampling. Re-tune with "Width (chars)" (20–300), a Charset select (Simple, Detailed, Blocks, Dots, Binary), and an optional "Colored output" checkbox that preserves RGB per character as HTML spans.
The result reports "ASCII Lines" ("{lines} lines × {width} chars") next to the "Original" size, with "Copy Text", "Download .txt" (ascii-art.txt), and "Start Over". Height is computed as width × aspect × 0.5 so character cells don't stretch. Sampling and rendering are fully local — no network, no AI — and progress percentages stream through the in-page ToolSkeleton.
How it works
lib/imageAscii.ts (imageToAscii) downscales the image to width × max(1, round(width * aspect * 0.5)) — the 0.5 factor compensates for monospace character cell aspect ratio — then samples BT.601 brightness at each cell and indexes into the chosen charset. Optional colored mode emits <span style="color:rgb(r,g,b)"> per character (HTML-escaped) wrapped in a 4px monospace <pre>.
Conversion starts automatically on file select (handleFiles) with defaults width 100, charset Simple, colored false; the form's "Generate ASCII" re-runs with new settings. Zod: width int 20–300 default 100. Redux asciiSlice tracks item, result, progress, isProcessing — progress callbacks report 10→30→60→90→100. No third-party libs; no network, no AI.
How to use
- Drop an image — ASCII generates immediately with defaults (width 100, Simple charset) while "Converting to ASCII..." shows.
- Optionally change "Width (chars)" (20–300) and "Charset" (Simple, Detailed, Blocks, Dots, Binary).
- Optionally check "Colored output" (description: "Preserve original colors").
- Click "Generate ASCII" to re-run with new settings (button reads "Converting...").
- Read the "ASCII Lines" stat ("{lines} lines × {width} chars") beside the "Original" size.
- Click "Copy Text" (toast "ASCII text copied to clipboard!") or "Download .txt" (ascii-art.txt, toast "Downloaded ASCII art!").
- Click "Start Over" to clear.
Tips
- Height is width × aspect × 0.5 — the 0.5 factor keeps characters from looking vertically stretched.
- Colored output emits HTML (rendered via dangerouslySetInnerHTML); plain "Copy Text" copies the raw characters either way.
- Binary ( 01) and Blocks charsets suit monospace share-outs; Simple is the legible default.
- Progress is reported in-page (ToolSkeleton) — large widths (300) take noticeably longer.
Image to ASCII Art FAQ
Does it run automatically?
Yes — conversion starts on file select with defaults; the form re-runs with your settings when you click Generate ASCII.
What file downloads?
ascii-art.txt (a text/plain Blob).
Is colored output copyable as text?
Copy Text gives the plain characters; the colored HTML preview is separate (result.html).
What's the maximum width?
300 characters (enforced by both the zod schema and the slider).
Is the image uploaded?
No — sampling and rendering are local; progress percentages are simulated via callback (no network, no AI).
Credits
- Canvas 2D API — Downscale sampling and character-grid rendering