# ink-asciify-image

> Asciify image component for Ink.

Latest version **1.1.1** (published 2024-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-asciify-image
pnpm add ink-asciify-image
yarn add ink-asciify-image
bun add ink-asciify-image
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2024-09-30 |
| First published | 2024-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nopujs |
| Maintainers | alengyuan |
| Keywords | ink, ink-component, asciify-image, ascii, image, esm |

## Links

- npm: https://www.npmjs.com/package/ink-asciify-image
- Repository: https://github.com/nopujs/ink-asciify-image
- Homepage: https://github.com/nopujs/ink-asciify-image#readme
- Issues: https://github.com/nopujs/ink-asciify-image/issues
- npm.io page: https://npm.io/package/ink-asciify-image

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2024-09-30

## README

## !! This package has been deprecated, please do not continue to use it! !!

# Ink-asciify-image @Nopu (Deprecated) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/nopujs/ink-asciify-image/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/ink-asciify-image.svg?style=flat)](https://www.npmjs.com/package/ink-asciify-image)

Ink-asciify-image is a component for [Ink](https://github.com/vadimdemedes/ink).

## Installation

```shell
npm install ink-asciify-image
```

## Examples

```javascript
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>,
)
```

## APIs

### React component

```typescript
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

```typescript
/**
 * @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

<details open>
<summary>
<h3 style="display: inline;">Why is the size of this package so large?</h3>
</summary>
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 <del>very large due to the use of un-customized <a href="https://github.com/jimp-dev/jimp">Jimp</a></del> 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?
</details>

<details open>
<summary>
<h3 style="display: inline;">Why is this package called its current name?</h3>
</summary>
This package is one component for <a href="https://github.com/vadimdemedes/ink">Ink</a>, and it is inspired by <a href="https://github.com/ajay-gandhi/asciify-image">asciify-image</a>.
</details>

## License

Ink-asciify-image is [MIT](https://github.com/nopujs/ink-asciify-image/blob/main/LICENSE) licensed.

---
_Source: https://npm.io/package/ink-asciify-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._