Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/im-rises/image-ascii-art
Image ASCII convertissor for React
https://github.com/im-rises/image-ascii-art
ascii ascii-art image image-ascii npm package
Last synced: about 21 hours ago
JSON representation
Image ASCII convertissor for React
- Host: GitHub
- URL: https://github.com/im-rises/image-ascii-art
- Owner: Im-Rises
- License: mit
- Created: 2023-05-01T19:17:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T02:32:00.000Z (over 1 year ago)
- Last Synced: 2024-10-30T02:28:07.708Z (3 months ago)
- Topics: ascii, ascii-art, image, image-ascii, npm, package
- Language: TypeScript
- Homepage: https://im-rises.github.io/image-ascii-art-website
- Size: 1.56 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# image-ascii-art
## Description
This is a simple web package that converts an input image to ascii art.
## 🚀🚀🚀 [The package is published on npm](https://www.npmjs.com/package/image-ascii-art) 🚀🚀
It works on desktop and mobile as well, there is one demo you can find at the link below:
### 🚀🚀 [Image Ascii Art](https://im-rises.github.io/image-ascii-art-website/) 🚀🚀
The source code of the demo is available on GitHub:
[Image Ascii Art](https://github.com/Im-Rises/image-ascii-art-website)
This demo show you how to load a default image and how to load an image from your computer to convert it to ascii art.
## Video Stream version
I also made a video stream version.
### 🚀🚀 [Video Ascii Webcam](https://im-rises.github.io/video-stream-ascii-webcam/) 🚀🚀
### 🚀🚀 [Video Ascii Player](https://im-rises.github.io/video-stream-ascii-player/) 🚀🚀
The source code of the examples is available on GitHub:
- [Video Ascii Webcam](https://github.com/Im-Rises/video-stream-ascii-webcam)
- [Video Ascii Player](https://github.com/Im-Rises/video-stream-ascii-player)
## Screenshots
## Install packages
You can install it by typing the following command in your terminal:
```
npm install image-ascii-art
```
or
```
yarn add image-ascii-art
```
## Usage
To use the package, you need to import it into your project:
```js
import {ImageAscii} from "image-ascii-art";
```
Then you can create use the Component like this in Typescript/JavaScript:
```js
```
You can also pass a pre tag reference to the component, so it can be used to get the ASCII text:
```js
```
To use the component, you need to pass the following props:
- `image` - The input HTMLImageElement.
- `parentRef` - The reference of the parent element, to fit the ascii art in it.
- `artType` - The type of the ascii art, you can choose between `ASCII`, `ASCII_COLOR` and `ASCII_COLOR_BG_IMAGE`.
- `charsPerLine` - The number of characters per line.
- `charsPerColumn` - The number of characters per column.
- `fontColor` - The color of the font.
- `backgroundColor` - The color of the background.
- `preTagRef` - The reference of the pre tag, to get the ascii art text.
The `parentRef` is used to fit the ascii art in the parent element, so you need to pass the reference of the parent
element like a `div`, you can check the example to see how to use it.
> **Warning**
> Be careful when using this package, the image must be loaded before enabling the Image Ascii component, otherwise it
> will not work.
> If you want to set the ascii art with a correct aspect ratio, follow the example at the link below:
> [Image Ascii Art](https://im-rises.github.io/image-ascii-art-website/)
The `artType` is used to choose the type of the ascii art, you can choose between `ASCII`, `ASCII_COLOR`
and `ASCII_COLOR_BG_IMAGE`.
- `ASCII` - The ascii art will be defined only by two colors the font color and the background color. (which you can set
with the props `fontColor` and `backgroundColor`).
- `ASCII_COLOR` - The ascii art will be printed with each character having the color of the pixel it represents (it is
an extensive mode, you should use the `ASCII_COLOR_BG_IMAGE` mode instead).
- `ASCII_COLOR_BG_IMAGE` - The ascii art will be printed with color using the original image as background for the color
of the characters, you should use this mode if you want good performance instead of the `ASCII_COLOR` mode.
> **Note**
> Be sure to import the enum `ArtTypeEnum` from the package, to use it in your code.
## Code style
The code style used in this project is XO.
You can find some changes in the `.eslintrc.js` file.
The project is also set up to use ESLint.
## GitHub Actions
[](https://github.com/Im-Rises/image-ascii-art/actions/workflows/node.js.yml)
[](https://github.com/Im-Rises/image-ascii-art/actions/workflows/eslint.yml)
[](https://github.com/Im-Rises/image-ascii-art/actions/workflows/codeql.yml)
[](https://github.com/Im-Rises/image-ascii-art/actions/workflows/npm-publish.yml)
The project is set up to run the following actions:
- node.js.yml : Runs the tests for the Node.js project.
- eslint.yml : Runs the ESLint linter on the project.
- codeql.yml : Runs the CodeQL linter on the project.
- npm-publish.yml : Publishes the package to the npm registry.
## Documentations
Xo:
ESLint:
GitHub gh-pages:
## Links
Check the source code
on [](https://github.com/im-rises/image-ascii-art)
Check the package
on [](https://www.npmjs.com/package/image-ascii-art)
## Contributors
Quentin MOREL :
- @Im-Rises
-
[](https://github.com/Im-Rises/image-ascii-art/graphs/contributors)