Ink-asciify-image ·

Ink-asciify-image is a component for Ink.

Installation

npm install ink-asciify-image

Examples

import React from 'react'
import { render, Box } from 'ink'
import InkAsciifyImage from 'ink-asciify-image'

render(
    <Box gap={1}>
        <InkAsciifyImage
            url="./avatar.jpg"
            width={80}
            height={40}
            alt="Author's avatar"
        />
        <InkAsciifyImage
            url="./icon.png"
            width={40}
            height={40}
            tryCorrectAspectRatio
            renderInTwoBit
        />
        <InkAsciifyImage
            url="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.pnggg"
            width={40}
            height={20}
            alt={
                'The wrong path, accidentally typed two extra "g" at the end of the URL'
            }
        />
    </Box>,
)

Result:

APIs

React component

const InkAsciifyImage: React.FC<{
    url:⁰ string;
    width:¹ number;
    height:² number;
    tryCorrectAspectRatio?:³ boolean;
    renderInTwoBit?:⁴ boolean;
    alt?:⁵ string;
}>;

• ⁰ [url]: URL of the rendered image, supports loading local URL, or network URL based on HTTP, supported image formats include "jpeg", "png" and "bmp".
• ¹ [width]: Width of the rendered image.
• ² [height]: Height of the rendered image.
• ³ [tryCorrectAspectRatio]: Specifies whether to attempt to correct the aspect ratio of the rendered image, it often takes two ASCII characters to render a square like pixel point, this option would not eliminate the destructive effect on the original image's aspect ratio caused by the given width and height.
• ⁴ [renderInTwoBit]: Specifies whether to render the image in monochrome.
• ⁵ [alt]: Description of the image content, which will be displayed instead of an error message if the image fails to load.

Core function

/**
 * @throws {RangeError} Value of `width` or `height` must be natural number.
 */
function asciifyImage(url:⁰ string, { width, height, tryCorrectAspectRatio, renderInTwoBit }: {
    width:¹ number;
    height:² number;
    tryCorrectAspectRatio?:³ boolean;
    renderInTwoBit?:⁴ boolean;
}):⁵ Promise<Array<string>>;

• ⁰ [url]: URL of the rendered image, supports loading local URL, or network URL based on HTTP, supported image formats include "jpeg", "png" and "bmp".
• ¹ [width]: Width of the rendered image.
• ² [height]: Height of the rendered image.
• ³ [tryCorrectAspectRatio]: Specifies whether to attempt to correct the aspect ratio of the rendered image, it often takes two ASCII characters to render a square like pixel point, this option would not eliminate the destructive effect on the original image's aspect ratio caused by the given width and height.
• ⁴ [renderInTwoBit]: Specifies whether to render the image in monochrome.
• ⁵ [asciifyImage()]: It would return a promise instance contains an array which stores each line of ASCII characters rendered from image.

FAQ

Why is the size of this package so large?

In order to prevent developers from encountering various problems that have to be solved when using this package, if they prefer ES modules, and let the image in the component can be rendered synchronously. By prepackaging core function, although possible errors are reduced, the total size of the package is very large due to the use of un-customized Jimp large due to the bundle of necessary dependencies. If you're not happy with this, you can fork the source code of this package and do it however you want. But this package is not used in browsers, so why care about the size so much?

Why is this package called its current name?

This package is one component for Ink, and it is inspired by asciify-image.

License

Ink-asciify-image is MIT licensed.