terminal_images

terminal_images is a Deno module and CLI tool, written in TypeScript, for displaying images in the terminal.

Currently only PNG and JPG images are supported.

To install the CLI tool, run the following from the command line:

deno install --allow-read --allow-net --unstable --force https://x.nest.land/terminal_images@2.0.0/cli.ts

Then run

terminal_images --file="https://deno.land/images/hashrock_simple.png" --character-map="   % @"

...and you should see something like this displayed in your terminal:

                 @@@@@@@@@@@@@@                 
            @@@@@@@@ @@    @@@@@@@@@            
         @@@@@       @@    @@     @@@@@         
       @@@@         @@@              @@@@       
     @@@@ @@@       @@                 @@@@     
    @@@   @@@                  @@        @@@    
  @@@@@  @@@      %%%%%%%%%%  @@@         @@@@  
  @@@@   @@   %%%%%%%%%%%%%%%%%%       @@  @@@  
 @@@        %%%%%%%%%%%%%%%%%%%%%%    @@@   @@@ 
@@@        %%%%%%%%%%%%   %%%%%%%%%   @@     @@@
@@@       %%%%%%%%%%%%%%%%%%%%%%%%%% @@@     @@@
@@@     @ %%%%%%%%%%%%%%%%%%%%%%%%%%%     @@@@@@
@@@    @@ %%%%%%%%%%%%%%%%%%%%%%%%%%%%    @@@@@@
@@@   @@@ %%%%%%%%%%%%%%%%%%%%%%%%%%%%    @@ @@@
@@@   @@    %%%%%%%%%%%%%%%%%%%%%%%%%%%  @@  @@@
 @@@  @     @@%%%%%%%%%%%%%%%%%%%%%%%%%     @@@ 
  @@@      @@@         %%%%%%%%%%%%%%%%%   @@@  
  @@@@     @@           %%%%%%%%%%%%%%%%  @@@@  
    @@@    @@         @@%%%%%%%%%%%%%%%%%@@@    
     @@@@       @@   @@@ %%%%%%%%%%%%%% @@@     
       @@@@    @@@   @@  %%%%%%%%%%%%@@@@       
         @@@@@@@@   @@@   %%%%%%%%@@@@@         
            @@@@@@@@      %% @@@@@@@            
                 @@@@@@@@@@@@@@

Note that the size might be different, as by default it adapts to the size of your terminal.

You can also use the module, which has exports two functions: getImageString and printImageString, which both take in an object with the same properties.

Here is an example of how you can use it:

import { printImageString } from "https://x.nest.land/terminal_images@2.0.0/mod.ts";

printImageString({

 // replace this with the URL or local file path of the image you want to print out
 path: "https://deno.land/images/deno_city.jpeg",

 // when true the output will be in color
 color: true,

 // by default the size of the image is set to fit in the terminal,
 // but you can override it with the width property
 width: 56
})

This should output something like this:

pixelated terminal image

API

Property	Type	Description	Default Value	CLI Flag
`path`	string	The path or URL of the input image.	No default	`--file` or `-f`
`color`	boolean	Whether the output should be in color.	`false`	`--color` or `-c`
`characterMap`	string \| string[]	See the section on character maps for more information.	By default a character map isn't used, and high-res mode is used instead.	`--character-map` or `-m`
`inverted`	boolean	Whether the character map should be mapped from light to dark instead of dark to light. Normally you will want to set this to true if your terminal is in a dark theme.	`false`	`--inverted` or `-i`
`width`	number	The number of characters wide the image should be.	The maximum value where all of the image is visible at once	`--width` or `-w`

Because the size of the image automatically adapts to the size of your console, the image produced will have a higher resolution (unless you have manually set width) if the font size is smaller and the terminal window is larger, as more can fit on the screen.

Character map?

The "character map" is the characters that are used to display the image. If no character map is specified, it will default to high(er) resolution mode--see the module usage example above.

The characters at the beginning of the character map should be the darkest and the ones at the end be the lightest. You can switch this around by using the inverted flag/property.

If you are using the module, you can set the character map to an array of strings, where each element will be used as a pixel color (rather than each character of the string).

Some tips for using character maps:

Simple images with recognisable shapes and high contrast work the best. (Although if you aren't aiming for functionality, go wild!)
Normally you will want to invert the character map if your terminal is in a dark theme.
You can generate ASCII art by using character maps such as "@#?)l+-. " and blocky images using character maps like █▓▒░ .
Make sure you have escaped any characters you need to with a backslash (\).
You don't have to sort your characters from darksest to lightest or vice versa. Play around with what works for specfic images, and see if you can create any interesting effects.
Padding your character maps can be useful when brightness is not evenly distributed. For example, if your image has mostly dark tones, then your character map might have some extra spaces on the end, so that it is easier to distinguish between darker colors than lighter ones.
Try to make characters next to each other in the character map similar. For example, don't put a . after a ' as one is displayed much lower down than the other.

Required Permissions

Flag	R	Reason
`--unstable`	*	To detect the size of your terminal
`--allow-net`	_	To fetch images from the web
`--allow-read`	_	To use images stored locally

Examples

Inverted image loaded from unsplash Colored high-res image loaded from unsplash

For more example outputs, have a look at the images folder.

Todo

Add some color
Publish to nest.land
Add support for using images loaded from the web (rather than just locally)
Auto-detect file format (no need to rely on the file extension)
Allow the user to input an array of strings for the character map [added, but user can't do this when using the cli]
Finish the documentation in README.md
Add jsdoc documentation in the code
Add support for unicode characters
Add high(er) resolution output mode
Correctly handle characters such as emojis that have a width that isn't 1
Add some tests (this might be diffult as detecting the terminal size won't work)
Don't count modifier characters (e.g. emoji skin tones) as separate characters (unless they aren't modifying anything and are visible)
Deal with transparency better (especially for high-res mode)
Option for width as a percentage of terminal screen
Detect whether terminal theme is light or dark automatically?
Better error handling (e.g. 404 when fetching image)
Add support for webp images
Add support for GIF images
Add support for TIFF images

Contributions

Contributions are welcome! Just pick something to do (the todo list above is a good starting point) and let me know you want to work on it by opening an issue or commenting on a relevant existing issue.

If you think you have found a bug, please open an issue (after checking for similar issues).

License

terminal_images is under the open source MIT license. See the LICENSE file for legal words.