@jworkshop/canvasasciifier

canvasasciifier

A <pre> text React component which renders ascii from a canvas.

install

Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";

import CanvasAsciifier from "@jworkshop/canvasasciifier";

import "./style.css";

class Example extends Component {
  someFunction() {
    const { myCanvas, myAsciifier } = this;

    /** Get the pre element with the generated ascii text. */
    myAsciifier.getTextElement();

    /** Update the pre element with generated ascii text. */
    asciifier.update(myCanvas);

    /** Generate ascii text from the canvas image data. */
    let asciiCode = myAsciifier.generateAsciiCode(myCanvas);
  }

  render() {

    return (
      <canvas
        ref={myCanvas => this.myCanvas = myCanvas}
      />
      <CanvasAsciifier
        ref={myAsciifier => this.myAsciifier = myAsciifier}
        className="className"
        style={ ... }
        textClassName="textClassName"
        textStyle={ ... }
        invert={true}
        asciiData={[" ", ".", ",", ";", "|", "*", "%", "@", "X", "#", "W", "M"]}
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));