DotArt

Image to braille character converter

What is DotArt?

DotArt is a browser-based tool for converting images to text using Unicode braille characters, the “dots” of which will form a rough representation of the image. It’s kind of hard to explain - you’ll understand it quicker if you just give it a try.

The text-based images this tool creates can be used in places where images cannot; for example, on forums or chat systems (such as Discord and Slack) where users may post text but not images. It can also be used simply when the aesthetic if the images it creates are desirable.

How does DotArt work?

After you choose a picture, DotArt scales the image so that it will fit under the Unicode character limit. It then internally converts the image to a grayscale representation of itself (that is, an image which consists only of shades of gray). The image is then processed again to consist only of a black or white version of itself (that is, only black and white pixels; no shades of gray) based on other settings you provide. The “dots” of that image are used to build the Unicode braille characters representing the image. Well, some of those steps actually happen a little out of order, but that’s the basics of it.

What do the controls do?

DotArt provides various controls to tweak the appearance of its results. You are encouraged to experiment with the controls to get the best results.

File upload: Choose the file you wish to convert. Note that this tool works entirely in your browser and the image is not “uploaded” to a server for processing. (Don’t believe me? Check out the code yourself.)

Threshold: When converting from the grayscale to black-and-white representations of the image, this value represents the “cutoff” between what shades of gray are converted to black and what shades of gray are converted to white. Adjusting this value will result in a darker or lighter image.

Max characters: The maximum number of text characters which can be used to represent your image. If the system you are trying to use complains about the message being too long when you paste in DotArt’s results, try reducing this number.

Dithering: With dithering enabled, different shades of gray will be represented by different patterns of dots in the final image. Ordered dithering will result in a more uniform pattern; Atkinson dithering looks more random but generally shows the edges between light and dark areas better.

Coloring: Adjust whether DotArt’s results will be used on a system which represents light text on a dark background (White on Black; Discord, by default), or dark text on a light background (Black on White; Slack and most web sites).

Horizontal & Vertical Gap: Adjusts how wide, in braille “dots,” the gaps are between characters. The default values of 1 will suffice in most cases, but you might need to experiment a bit to get proper-looking results depending on the styles and fonts used by the final system.