Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waichungwong/jw-canvas-ascii
A text react component which renders the ascii text converted from a canvas image data.
https://github.com/waichungwong/jw-canvas-ascii
ascii ascii-converter canvas npm-module react
Last synced: about 2 months ago
JSON representation
A text react component which renders the ascii text converted from a canvas image data.
- Host: GitHub
- URL: https://github.com/waichungwong/jw-canvas-ascii
- Owner: WaiChungWong
- License: mit
- Created: 2018-05-07T15:54:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-15T08:23:41.000Z (almost 6 years ago)
- Last Synced: 2024-11-04T05:26:19.242Z (2 months ago)
- Topics: ascii, ascii-converter, canvas, npm-module, react
- Language: JavaScript
- Size: 2.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jw-canvas-ascii
A text react component which renders the ascii text converted from a canvas image data.
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/jw-canvas-ascii.svg
[npm-url]: http://npmjs.org/package/jw-canvas-ascii
[travis-image]: https://img.shields.io/travis/WaiChungWong/jw-canvas-ascii.svg
[travis-url]: https://travis-ci.org/WaiChungWong/jw-canvas-ascii
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/jw-canvas-ascii.svg
[download-url]: https://npmjs.org/package/jw-canvas-ascii
[Demo](http://waichungwong.github.io/jw-canvas-ascii/build)
## Install
[](https://nodei.co/npm/jw-canvas-ascii)
## Methods
| Method | Parameters | Description |
| ------------------- | --------------------- | --------------------------------------------------------------- |
| `setCanvas` | `canvas`: DOM element | set a target canvas component to convert image data from |
| `getTextElement` | | retrieve the ascii text element |
| `generateAsciiCode` | | returns a newly generated ascii text from the canvas image data |
| `update` | | re-render ascii text onto the text element |
## Props
| Prop | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `asciiData`(optional) | an array of character to present the ascii with.
Ordered from brightest (white) to darkest (black).
Default: `[" ", ".", ",", ";", "\|", "\*", "%", "@", "X", "#", "W", "M"]` |
| `invert`(optional) | whether to reverse the `asciiData` ordering
Default: `false` |
## Usage
```javascript
import React, { Component } from "react";
import { render } from "react-dom";
import CanvasASCII from "jw-canvas-ascii";
class Example extends Component {
constructor(props) {
super(props);
this._resizeHandler = this._resizeHandler.bind(this);
}
componentDidMount() {
const { canvas, ascii } = this;
let context = canvas.getContext("2d");
/**** Start drawing on the canvas here. *****/
ascii.setCanvas(canvas);
/** Handle auto update when the canvas size changes. */
window.addEventListener("resize", this._resizeHandler, false);
canvas.addEventListener("resize", this._resizeHandler, false);
}
componentWillUnmount() {
const { canvas } = this;
window.removeEventListener("resize", this._resizeHandler);
canvas.removeEventListener("resize", this._resizeHandler);
}
_resizeHandler() {
this.ascii.update();
}
render() {
return (
(this.canvas = c)} />
(this.ascii = a)} invert={false} />
);
}
}
render(, document.getElementById("root"));
```