DOCSEARCHbyAlgolia
Submit Docs

ITOA Image to ASCII Converter

repository·main·Indexed 41 days ago

https://github.com/solst-ice/itoa

A web-based utility that converts JPG, PNG, and GIF images into ASCII art. Version 0.1.0 supports monochrome and color modes using HTML span tags for RGB styling, customizable character presets, and the ability to export the resulting ASCII art as a PNG image.

Tokens
1K
Snippets
3
Records
5
Agent score
2%

What's inside ITOA

  1. Overview of ITOA: Image to ASCII Converter

    main
    ITOA is a web-based tool designed to convert images into ASCII art. It supports multiple file formats including JPG, PNG, and GIF. Users can choose between monochrome text output or colored ASCII output where original pixel colors are preserved using HTML <span> tags with inline RGB styling. The tool also allows for size adjustments (Small, Medium, Large) and provides the ability to export the resulting ASCII art as a PNG image.

  2. How the ASCII conversion process works

    main

    The conversion follows a three-step pipeline:

    1. Image Processing: The image is loaded and scaled via the Canvas API to maintain aspect ratio, allowing access to individual pixel RGB values.
    2. ASCII Mapping:
      • Monochrome: Brightness is calculated using the luminance formula 0.299R + 0.587G + 0.114B. This brightness is then mapped to the character set .:-=+*#%@ (ordered from darkest to brightest).
      • Color: Uses the same character mapping for structure, but wraps each character in a <span style="color: rgb(R, G, B)"> tag to preserve the original pixel color.
    3. Output Generation: Generates either pure text (monochrome) or an HTML structure with styled spans (color).

  3. Convert an image to ASCII art

    main

    The core conversion logic uses a convertToAscii function that takes an image file and an optional custom character set. It calculates the appropriate dimensions to preserve the aspect ratio, accounts for the character aspect ratio (typically 0.6), and generates both a monochrome text version and a colored HTML version (using <span> tags with RGB colors).

    const convertToAscii = useCallback(async (file, customChars = null) => {
  // ... implementation details ...
}, [size, asciiChars])

  4. Save ASCII art as a PNG image

    main

    The handleSaveAscii function renders the current ASCII art (either monochrome or colored) onto a high-resolution HTML5 Canvas and triggers a download.

    • Monochrome mode: Uses a default pink color (#ff2b9d).
    • Color mode: Extracts RGB values from the generated HTML spans and renders them to the canvas with a 1.3x brightness boost.
    • Mobile support: On supported mobile devices, it attempts to use the navigator.share API to share the generated image file directly.
    const handleSaveAscii = () => {
  // ... implementation details ...
}

  5. Available ASCII Character Presets

    main

    The converter includes several built-in character sets (presets) to change the visual style of the ASCII art. You can select these from the preset dropdown or provide your own custom string of characters in the input field.

    const charPresets = {
    'Standard': ' .:-=+*#%@',
    'Detailed': ' .\'"`,^:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$',
    'Blocks': ' ░▒▓█',
    'Triangles': ' ◺◹◸◿▸▹►▻▷▶',
    'Simple': ' .-+*#@',
    'Binary': '01',
    'Minimal': ' .@',
    'Dots': ' .·•●',
    'Circles': ' ○◌◍◐◑●',
    'Squares': ' ▫▪◽◾◻◼',
    'Shades': ' ░▒▓█',
    'Lines': ' -=≡',
    'Slashes': ' /\\|',
    'Arrows': ' ←↑→↓',
    'Box Drawing': ' ─│┼╬█',
    'Brackets': ' ()[]{}',
    'Waves': ' ∼≈≋',
    'Stars': ' .·*✦✧★',
    'Cards': ' ♤♡♢♧',
    'Music': ' ♪♫♬',
    'Currency': ' ¢$€£¥',
    'Math': ' ∙·+×÷',
    'Dingbats': ' ○◇◊◆',
    'Braille': ' ⠁⠃⠇⠏⠟⠿⣿',
    'Runes': ' ᚁᚂᚃᚄᚅᚆᚇᚈ',
    'Greek': ' αβγδεζηθ',
    'Japanese': ' 。あいうえおかきくけこ'
}