0.1.5 • Published 5 years ago
jw-canvas-ascii v0.1.5
jw-canvas-ascii
A text react component which renders the ascii text converted from a canvas image data.
Install
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 orderingDefault: false |
Usage
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 (
<div id="example">
<canvas ref={c => (this.canvas = c)} />
<CanvasASCII ref={a => (this.ascii = a)} invert={false} />
</div>
);
}
}
render(<Example />, document.getElementById("root"));