Image to ASCII Art

The conversion draws your image into an off-screen canvas resized to the chosen character width (the slider spans 40 to 200 in steps of 10, with quick buttons for 60, 80, 100, 120, and 150). Row count is not just the image height: it is computed as floor(width * aspectRatio * 0.5), and that 0.5 factor exists because monospace character cells are roughly twice as tall as they are wide, so sampling half as many rows as columns keeps the art from looking vertically stretched. Each output cell reads one canvas pixel, averages its red, green, and blue channels into a brightness value (a flat (r+g+b)/3 average rather than a luma-weighted one), normalizes it to 0-1, and picks a glyph from the active character ramp.

The ten built-in ramps are ordered from light to dark, so brightness maps directly to glyph ink coverage: Standard ( .:-=+*#%@), Detailed ( .':!~+=?*^%$#@), Simple ( .oO0), Dots ( ·•●), Blocks ( ░▒▓█), Braille (a 15-step dot ramp), Box ( ▁▂▃▄▅▆▇█), Stars, Matrix (just '10'), and Emoji color squares. The mapping math adapts to ramp length: charsets of three glyphs or fewer use Math.round for index selection while longer ramps use Math.floor, a deliberate fix so a two-character ramp like Matrix splits cleanly at the 50% brightness midpoint instead of collapsing toward one symbol. The Invert toggle flips the index (length - 1 - index) to swap light and dark regions, which is why the Matrix preset ships inverted and auto-switches the display to the green-on-black Matrix theme.

The six presets are starting points that set width, charset, and invert together (Terminal at 80 cols, High Detail at 150, Compact at 60, Unicode Blocks at 100, Braille Art at 120, Matrix at 100 inverted), and every control is encoded into the URL so a full configuration can be shared as a link. Display styling is separate from the text content: six single-color themes (Dark, Light, Matrix, Amber, Blue, Purple, each a fixed background/foreground pair), five font sizes from 6px to 14px, and a line-height slider from 0.6 to 1.5. Those styling choices only affect the preview and the rendered exports, not the characters themselves. You can copy the raw text, download it as a .txt, export a self-contained .html file with the theme baked into inline CSS (Courier New, white-space: pre), or rasterize a .png where the canvas is sized from the line count and a per-character width of fontSize * 0.6 with 20px padding around the art.