Text → ASCII art
ASCII only: Chinese, Japanese and emoji have no 5x7 Latin glyph, so this tab warns and skips them - use the Image to ASCII tab for pictures.
ASCII art output
Image → ASCII art
Click Choose image, drop an image file onto this area, or press Ctrl+V to paste a screenshot.
Output options
The image is only decoded and sampled on this page: nothing is uploaded, no request is made, and closing the tab forgets it.
ASCII art output
What is this
This generator puts two jobs on one page. First, text to ASCII: a built-in 5x7 bitmap font lays A-Z, digits and a set of punctuation into big block banners (the figlet kind) in four styles - solid, shadow, outline, dot matrix - and you can replace the fill and empty characters yourself. Second, image to ASCII: a bitmap is bucketed by grey level and redrawn with symbol density, with output width, vertical density, brightness, contrast, inversion and a colour preview all adjustable.
Both run entirely in your browser. The glyph table ships with the page in one download, images are decoded by the browser and sampled on a canvas: there is no fetch or XHR, no backend endpoint, and neither your text nor your picture leaves the device. Copy the result or download it as .txt for a README, a code comment or a terminal banner.
Features
- A 5x7 bitmap font includedA-Z, 0-9, space and 30 common punctuation marks each have their own glyph, lowercase reuses the uppercase one; no third-party figlet library and no font file to fetch.
- Four styles, custom charactersSolid fills whole blocks, shadow adds a diagonal layer one cell down-right, outline draws only the silhouette (strokes as #, outer edge as .), dot matrix uses @ and . for on/off; you can type your own fill and empty characters, and the 1x-4x scale repeats both axes.
- Three ways in for an imagePick a file, drop it on the zone, or press Ctrl+V to paste a screenshot. A thumbnail plus the original size and file size appear first, then the banner is built from the current options and recomputed as soon as you touch them.
- Three ramps and grey-level controlA 10-level standard, an 8-level simple and a 4-level block grey scale ramp (dark to light), combined with output width (20-200 characters), vertical density (compact / standard / loose), brightness (-100…100), contrast (0.2…3) and inversion to bring faces and logos back into a readable range.
- Colour preview, plain-text exportWith colour output every character gets the average colour of its source pixel, so you can check the result against the original; copy and download always export the same single-colour plain text, so nothing HTML-ish ends up in a code comment or terminal.
- Zero dependencies, static, offlineNo third-party runtime library, no API calls, no uploads. Once the page has loaded, both tabs keep working with the network switched off.
How to use
- Banner: on the first tab type a Latin word or some digits, pick the style and the scale, override the fill / empty characters if you want a different look, then click Generate banner.
- Image: switch to the second tab, choose a picture or drop one in (Ctrl+V works too) and check the thumbnail and the dimensions first.
- Options: the width decides how wide the art is; if faces look stretched change the vertical density; if the whole picture is dull raise brightness, if it is muddy raise contrast; tick invert for black-on-white.
- Colour output is for checking against the original - when the art goes into code or a terminal use Copy or Download .txt, which give you the colour-free text.
- Trying several widths is cheap: every change to the slider resamples with the current options, so you never have to pick the file again.
Specs and data source
Text tab: the glyphs are our own 5x7 bitmap table (window.ASCII_FONT_5X7) covering A-Z (lowercase reuses them), 0-9, space and ! ? . , : ; ' " - + / ( ) [ ] # % & * @ = < > $ ^ _ | ~ ` \; each character takes 5 columns plus 1 blank separator and 7 rows; the shadow style offsets a diagonal one cell down-right, the outline style does 4-neighbour edge detection (strokes #, outer edge .). Image tab: output width 20-200 characters, vertical density 1.0 / 2.0 / 3.0 (cell height = cell width x density), brightness -100…100 (a shift of the normalised luminance; +/-100 saturates to fully light / fully dark, clamped to 0…1), contrast 0.2…3 (scaled around the 0.5 mid-point, then clamped); grey level uses the Rec. 709 weights L = 0.2126R + 0.7152G + 0.0722B, with transparent pixels composited over white. The three ramps, dark to light, are literally the 10-level standard @%#*+=-:. (9 symbols plus a trailing space, i.e. 10 buckets), the 8-level simple @#*+=-:. (8 symbols plus a trailing space, 9 buckets) and the 4-level block grey scale █▓▒░ (4 buckets, whose lightest entry is still ░ rather than blank - invert it when the picture is mostly white); a luminance v lands in bucket floor(v x buckets), clamped at both ends.
Images are capped at 30 MB, and any side longer than 4096 px is scaled down to 4096 px before sampling (decoding and the per-pixel averaging both work on that scaled bitmap, on an offscreen canvas created with willReadFrequently). Everything is 100% local to your browser: no fetch or XHR, no upload, no server-side record - the picture never leaves this device, which is the biggest difference from online ASCII-art tools and why ID photos or internal logos are safe to try. The glyph table and the ramps are static data in this repository and ship with the build.
FAQ
- Why does typing Chinese only give a warning?
- The first tab composes letters out of 5x7 Latin bitmap glyphs. A Chinese ideograph needs far more width and stroke density than that grid can hold, so no readable banner comes out of it; when non-ASCII characters are detected the tab says so and skips them instead of fetching anything. To turn Chinese characters into ASCII art use Image to ASCII: render them as an image (a screenshot is fine) and sample that by grey level.
- The block grey scale uses █▓▒░, which is not ASCII - is that misleading?
- It genuinely is not 7-bit ASCII: those are Unicode block elements (U+2588 / U+2593 / U+2592 / U+2591), and the control labels them honestly as a block grey scale. They give the smoothest shading, at the cost of terminals, plain-text editors and some code comments that may not draw them or draw them at a different width. For those places pick the 10-level or 8-level ramp, which are pure ASCII.
- What is vertical density, and why do faces look stretched?
- In a monospaced font a cell is roughly twice as tall as it is wide, so sampling a square grid stretches the picture. The tool multiplies the cell width by the density (2.0 by default) to get the cell height, meaning each row averages twice the vertical span of a column - only then does the art keep the proportions of the original. Compact 1.0 doubles the line count and detail but stretches it, loose 3.0 makes it shorter and more summarised; pick what matches the source.
- Colour output looks nice - why is the copy colour-free?
- Colour only sets a foreground colour per character on the page (built from DOM nodes with textContent, never by concatenating HTML), while copy and download export the same monochrome plain text: ASCII art usually goes into code comments, READMEs and terminal banners, which do not understand colour and would break on HTML. Screenshot the page if you want the coloured version.
- Is the image uploaded anywhere? Does it work offline?
- No upload. The browser decodes the image and samples it on a canvas, and the text tab only reads the glyph table shipped with the page - the whole process makes no network request, and the server never sees your input. After the page has loaded, both tabs keep working offline (only the ad slot at the top stays empty).
More tools on this site
- Unicode Emoji Table
- Chinese Converter
- Text Diff & Review
- Image Compressor
- Venn Diagram Generator
- PDF Toolkit
Pure front end · zero dependencies · free · EN / 简体 / 繁體