🖼️ Source Image
🖼️
Drop file here! Drag and drop an image here
or
Supports PNG, JPEG, GIF, WebP, BMP (max 4000×4000)
Selected Files ({{ selectedFiles.length }})
Total Files: {{ fileCount }}
Total Size: {{ formatFileSize(totalSize) }}
🎛️
Maps pixel luminance to characters from the ramp.
Template-matches each cell against a signed-distance field of detected edges.
⚙️
Lower = more contours (Sobel L1 magnitude).
Higher = prefer thinner glyphs in faint regions.
⚡
🔍
{{ sourceMeta.width }} × {{ sourceMeta.height }} px · {{ formatFileSize(sourceMeta.size) }}
📜
Per-character color (toggle Colorize off for plain text).
Plain text (toggle Colorize on for per-character color).
{{ output }}
{{ outputMeta.width }} × {{ outputMeta.height }} chars · generated in {{ outputMeta.elapsedMs }} ms
💡
- Drop or browse for an image on the left.
- Pick a rendering mode and tweak the options.
- Press Generate ASCII Art. Output appears here.
⚠️ {{ error }}
ℹ️ About ASCII Art Generator
ASCII Art Generator turns an image (PNG, JPEG, WebP, GIF) into ASCII art directly in your browser.
No upload is performed — the file is read with the local FileReader API, decoded to a canvas, and sampled per cell.
For converting text into a banner of block letters, use the dedicated ASCII Text Generator instead.
Two rendering modes:
-
Brightness ramp — maps each pixel's luminance to a character from a configurable ramp
(default uses Paul Bourke's 70-character density ramp for fine detail; you can paste a shorter set like
.:-=+*#%@for a chunkier look). Inspired by TheZoraiz/ascii-image-converter. -
Edge detection (contour) — pipeline lifted from
BrianMacIntosh/asciiart:
Gaussian blur → Sobel L1 magnitude → threshold → signed distance field → per-tile template match against the
full printable-ASCII glyph set. Each output cell picks whichever character's pixel shape best overlaps the local
contour, so curves naturally use
(,),c,J, etc., instead of being shoehorned into four fixed directional glyphs.
Tips:
- Increase output width for more detail; decrease it for a compact result.
- Toggle Invert for light text on dark backgrounds or vice versa.
- Enable Colorize to produce an HTML view that preserves per-character color.
- The default Aspect correction compensates for monospace cells being roughly twice as tall as wide.
Privacy: all processing runs locally in the browser. The image bytes never leave your device.