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 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"));