ascii_art

Introduction

This code is only an experiment to test converting images to a series of characters, also knows as ASCII art.

Example result

By example an old photo with my sister and me.

??????????????????????????????????????????????????333333333A3AAAAAAAAAAAAAAAAAA#####################
?????????????????????????????????????????????????333333333333AA3AAAAAAAAAAAAAAA#####################
??????????????????????????3AAAAA333333????????????33333333333AAAAAAAAAAAAAAAAA######################
????????????????????????3A###########A33?????????3?333333333AAAAAAAAAAAAAAAAAA######################
???????????????????????3#####M####MMM###A??????????33333333333AAAAAAAAAAAAAAAA######################
??????????????????????3#MMMMMMMM##MMMM#MM#3??????????3333333333AAAAAAAAAAAAAAA######################
?????????????????????3M@@MMMMMMMMMM#MMM##MM3???????3??333333333AAAAAAAAAAAAAA#######################
?????????????????????M@@@@@MMMMMM##M@M@MMM@@A??????????33333333AAAAAAAAAAAAAA#######################
????????????????????#@@@@@@@@M@@@@@@@@MMMM@@@M3????????33333333AAAAAAAAAAAAA########################
???????????????????A@@@@@@@@@MMMMMMM@@#MMMM@@@#3?????????3333A33AAAAAAAAAAAAA#######################
???????????????????#@@@@@@@@MMMMMMMM@@##MM@@@@@#????????*???3A33AAAAAAAAAAAAA#######################
??????????????????3@@@@@@@@@@MMMMMMM@@##MM@@@@@@A??????****??33AAAAAAAAAAAAA########################
??????????????????MM@@@@@@@@@@MMMMMM@@M#M@@@@@@@#??????***??33AA###AAAAAAAAA########################
?????????????????AMM@@@@@@@@@MM@@@@@@@MA#M@@@@@@#?33?33?*?3A33AA####AAAAAAAA########################
?????????????????M#MMMM@@@@@MMMM@@@@@@MA#M@@@@@@@##A3333??33AA######AAAAAAA#########################
????????????????AMM@MMMM@MMMMMMMMMMMMM#3A#M@@@@@@@M#33333333AA##A###AAAAAAA########################M
???????????????3##M@@@@MMM###AA########AA##M@@@@@@@A3AA33AA3AAAAAA#A33AAAA#########################M
???????????????3@#MM@@MMMMAA33?333AAAAAAA3A#M@@@@@@#AAA3AA3AAAAAAA#A3?AAAA##########################
??????????????3#@#MMM@@MM##A3?????33333333AA#MM@@@@#M#AAAAAAAAAAAAAAA33AA###########################
?????????????33M@M@@M@@MM##33??????33333333A##M@@@@MM###AAAAAAAAAAAAA33AAA##########################
?????????????3#M@M@@@@@MM##3????????????333A##M@@@@M####AAAAAAAAAAAAA33AAA##########################
?????????????3M@@@@@@@@MM#A??????????????33AA#M@@@@M#A3?3AAAAAA33AAAAA3AAAAAA#######################
?????????????AM@@#@@@@@@MA????**?????????33AA#@@@@M#A3?****??????333AAA##AAA########################
????????????3#@@@#MM@@@MA?????3A3?3??????333A#@@@@M#A?**-*******??33AAA##AAAA#######################
????????????AM@@@M3A#MMM3????3AA##A33?????33A#@@@@#3?***********???3A##M#AAAAAA#####################
???????????3#M@@@#3?A#M#3**???????3333??33A#MM@@@MA??***********???3A#MM#AAAAAAA####################
3??????????AMM@@@A??AAAA?****?3A#A333?333A###M@@@MA??**********????33#MM#AAAAAAA####################
3333???????##M@@@#*333AA?***?3#@@A#3??33A###3M@@@MA??********???????3#MMAAAAAAAAA###################
333333????3##M@@@M????AA?****?3M#?33?*3AMM@MA@@@@#3??333??**???333A33AMMAAAAAAAAA###################
3333333?33A#MM@@@@???333?******?333?**3#@@###@@@@#333?***??*????*??3AA@#3AAAAAAAA###################
33333???33AAMM@@@@3??333??*****??3?***?AAAAA#@@@@A3?*********???????33#?3AAAAAAAA###################
33333??333#AMMM@@@@?*33???******?*****?AA333#@M@MA??????3?***?33AA3??333AAAAAAAAAA##################
3333?????3A#MMM@@@@#333???***-********?33333@@@@M3?*?AM@#?*-**3A##A??33?3AAAAAAAAA##################
33?????3333AMMM@@@@@MMA???***--********33??3@@@@M3?**3A#3**-****??**?33?AAAAAAAAA###################
??????3333AAM@@@@@@@@MA???*************33??3@@MMMA?********--*******?33?AAAAAAA#####################
???????333A#M@@@@@@@@MA3??******???***?33??3@@@M@A?**----**--**---**??33AAAAAAAA####################
????????33AAM@@@@@@@@@A3??******??????333??#@@@M@#?**----****??---**????AAAAAAA#####################
????????333AM@@@@@@@@@3???*****???**?333333M@@M@M#?**----*A??3?--**???*3AAAAAAA#####################
???????3333A#M@@@@@@@@#???****????*??333333M@@##M#3***----*-*******?3??AAAAAAAA#####################
????33333333AM@@@@@@@@#????***?3333?333A33#@M@A3#A3?**---*********??3AAAAAAAAA######################
???333333333A#@@@@@@@@#3????**??3A###A#A33M@#MA3333?********??****?33AAAAAAAA#######################
???3?33333333##MMM@@@MA33???**????33AA33?A@MMM33333?*****?AA##3?*??3AAAAAAAA########################
3333333333333A#AAA#AM#333???????**?333333M@#@#333AA?*****?AAAAA???33AAAAAAA#########################
33333333333333AA33##A3???3???????????333M@MM@33333A?*****????33???3AAAAAAA##########################
3333333333333333*-*A3???*?3?????***???33##M@A3333**3******?3?????33AAAAAA###########################
333333333333333?---*3???*??33??****???3333#A33333---3*********??33AAAAAAA#########################MM
33333333333333?-    *??????3A3??***??3333333333?--- -?*?*****??333AAAAAAA######################MMMMM
3333333333333?-      -*?????3AA3????3A33333333?*---   **?***???33*?3##AA######################MMMMMM
333333333333?-         *????33AAAA#A3AAA33A33AA---     -*?3333333***A############MM##########MMMMMMM
33333333333?*           -????33AA#M3?3A##A###MMA-       -*??3A333*--?#M#########MMMMM###MMMMMMMMMMMM
3???333333A#A*           -*3333AAM?-*?AMMA***?M@A*        --*3AA*---*#@MM#####MMMMMMMM#MMMMMMMMMMMMM
3?????3333A?3?#           --?3AAA?---?A@M-    -MMA-       --#?*--3A--#@@A###M#MMMMMMMMMMMMMMMMMMMMMM
?3?3?33333???3?A3          --*AA?----*AM-       M@@@#-    ##---- *?AMM@@@3#MMMMMMMMMMMMMMMMMMMMMMMMM
3333333333*?A##3#?-        ---3#?----*A*-       -M@@MA#-A3*----- --*?M@@@*#MMMMMMMMMMMMMMMMMMMMMMMMM
???333333**3AA##3##*-      -*?#MM@#?***--        ?@@M*---------  ---*#@@@#3MMMMMMMMMMMMMMMMMMMMMMMMM
33?3333?3?*##AA#A3AM3?     -AM@M#MMM#?--         *M@@A-   ------  - -#@@@M*MMMMMMMMMMMMMMMMMMMMMMMMM
3??333??A3?###A##A?#MA3??-3AMMMMMM##MA--          A@@#*     -- -    -3@@@@-MMMMMMMMMMMMMMMMM#MMMMMMM
33?333?A#33A###A##A3M#AM#AM@MM##M@M#M#-          -A@@@*        -   - *@@@@*MMMMMMMMMMMMMMMMM#M@#MMMM
33?333?##333###3AA#A#MA@MM#MM####@M#M#-          -3@@@#              -@@@@?MMMMMMMMMMMMMMMMMM@@MMMMM
33?3333##33?AA#3?3A##@##MM#A#M###A@MM#--         - M@@M              -@@@@AMMMMMMMMMMMMMMMMM@@@MMMMM
????3A3##A?3AA3?*?3A#MM#MMM##MMM##@#M#--           M@@@             --M@@@#AMMMMMMMMMMMMMAMM@@@MMMMM
????3A3#AA**3333**3##M@#MMMM#MM###@M@3---          #@@@3            --3@@@#3MMMMMMMMMMMMMM3M@@@MMMMM
????3A3A3?**333A3?A###M##MA###M###MMM?---        ---@@@M            --?@@@#3MMMMMMMMMMMMMMM@@MMMM###
????3A?33?**3A##AA3##3##A#A########MM3*---          @@@@            -*A@@@#?MMMMMMMMMMMM@MM@@MMMMMAM
????3A??3?33AM###A?##3##A#######M##M#3*---          @@@@*           -*M@@@M*??MMMMMMMMMM@M@@@MMMMM#M
????3A????AAA####3A3#AA#A#M#####MM#MMA?----       - M@@@A           --@@@@M***3MMMMMMMMM@@@@@@MMMM#M
????3#3*3?33A####A3?##3##AMM####MMMMM#?- --       --#@@@#       -  ---@@@@M****3MMMMMMMM@@@@@M@MMMMM
????3#3?A33A######33##A###MM#####@M#MM?-  -       -*A@@@#    ---------M@@@M***-3MMMMMMMM@@@@@#MM@MMM
????A##33A3??A#AAAA3A#MM#MMM#####MM#MMA-          --3@@@#  ---*?MA****@@@@A-----#MMMMM?*A@@@##MMMM@M
????3##AA3333?*3A##33#MMMM#M###M#MM##MA-        -  -?@@@#****AM@@@@@MAM@@@3?*---3M#3#???*#M@MMMM@@@@
????A###?3A33**33A#AA#MMMM#M###M#MM##MM*        -- -*@@@@MM@@@@@@@@@@@@@@@?*---**AA*?- ???M@MM@@@@@@
???3A###?333A?*?3A#AA#MMM######M#M###M#*        ---**@@@@@@@@@@@@@@@@@@@@@**--?#A ?A#*--?*MMMM@@@@@@
???3####3*3333?3####A#MM#######@M@##MM3-        -*--*@@@@@@@@@@@@@@@@M@@@A?*-AMMA33AM????*MMMM@@@@@@
????A##3?*?3##33####AAMMM#A####@#@#MMM?-         -**A@@@@@@@@@@@@@@@#?M@@?**-?@M#M#33A??*#@MMMMMMMMM
33333#AA?**####3A###A3M#MM#####@MMMMM#            --A@@@M@@@MMM@@M@@A*3@@#*--**@@#A#?3*3#@@@MMMMMMMM

Syntax

This code for now is prepared to work only in web browsers. And its use is very easy:

imageToString(imageElement, columns, rows, charactersList);
): string {

• imageElment: is an HTML image component (<img />).
• columns: number of characters in a line.
• rows: number of lines.
• charactersList: optional array of characters to use in result, ordered from darkest to lightest. By default this characters list is used: @, M, #, A, 3, ?, *, -, " " (whitespace).

Use example

import { imageToString } from "asciiart.min.js";

const img = document.querySelector("img");
const text = imageToString(img, 200, 150);
document.querySelector("pre").textContent = text;

Credits

Photo used in example folder by Pixabay from Pexels