ASCII Art Generator (Image to Text)
Turn any photo into ASCII art — adjustable width and character density, monochrome text output you can copy or download.
1,145 views
How It Works
The generator draws your image onto a canvas, then divides it into a grid of sample cells and computes the average brightness (luminance) of each one. That brightness value is mapped onto a predefined character density ramp — something like @%#*+=-:. — running from characters that look visually dense and dark (@) down to sparse, light ones (a period or a plain space). A near-black cell becomes @, a near-white cell becomes a space, and everything in between lands somewhere along the ramp proportional to its measured brightness. Color is discarded in this step — only luminance, not hue, drives which character gets picked.
There's one wrinkle: monospace characters are tall rectangles, not squares, so mapping one pixel to one character would stretch the result vertically compared to the source photo. The tool corrects for this aspect-ratio mismatch by sampling roughly twice as many rows as columns — one character per pixel across, one character per two pixels down — which keeps the final ASCII art's proportions close to the original image instead of looking artificially tall and narrow.
As a concrete example, a photo sampled down to an output width of 100 characters produces roughly 100 columns by around 60-70 rows once the 2:1 vertical correction is applied — small enough to paste directly into a plain-text file, email, or terminal, while still being recognizable, because the character-density mapping preserves the overall light-and-dark pattern of the original even though every trace of color is gone.
Good to Know
Everything happens client-side: the photo is drawn to an in-memory <canvas> element and read back pixel by pixel with JavaScript, so nothing is ever transmitted to a server. You can adjust output width to trade detail for size — a narrow width produces a compact, more abstract result, while a wide one preserves finer detail at the cost of a much larger block of text — and invert the density ramp depending on whether the result will be displayed on a dark background (a terminal) or a light one (a printed page or white document).
Frequently Asked Questions
Why does the output look stretched or squashed?
Monospace characters are taller than they are wide, so the tool compensates by sampling roughly twice as many rows as a plain pixel grid would need — this keeps the proportions close to the original image. Without that correction, a square photo would come out looking noticeably tall and narrow once rendered in a monospace font.
How does the tool decide which character to use for each part of the image?
It averages the brightness of each sampled cell and maps that value onto a fixed density ramp of characters ordered from visually dense (like @ or #) to sparse (like . or a space) — darker areas get denser-looking characters, lighter areas get sparser ones. Only luminance is used for this mapping; the original color of each region doesn't affect which character is chosen.
Should I invert the character ramp?
If you'll display the result on a dark background (like a terminal), keep the default. If you'll paste it into a light background (like a white document), invert so dark areas still read as visually "heavier" — otherwise the tonal relationship flips and the image can look like a photographic negative of the original.
Does this upload my photo anywhere?
No — the image never leaves your browser. It's drawn to a local canvas element and sampled entirely client-side, the same way any other in-browser image editing tool works without a server round-trip.
Why does a higher output width produce a more detailed result?
Width controls how many sample cells the image is divided into — more cells means each one covers a smaller patch of the original photo, so brightness is measured at finer granularity and small details (an eye, a leaf edge, fine texture) survive the conversion instead of being averaged away into a single flat character.
Similar Tools
Report a Problem
ASCII Art Generator (Image to Text)
Comments
No comments yet — be the first to write one!