WaiChungWong/jw-canvas-ascii

A text react component which renders the ascii text converted from a canvas image data.

jw-canvas-ascii

A text react component which renders the ascii text converted from a canvas image data.

Demo

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 ordering Default: 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"));