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
;;; { superprops; this_resizeHandler = this_resizeHandler; } { const canvas ascii = this; let context = canvas; /**** Start drawing on the canvas here. *****/ ascii; /** Handle auto update when the canvas size changes. */ window; canvas; } { const canvas = this; window; canvas; } { thisascii; } { return <div id="example"> <canvas ref= thiscanvas = c /> <CanvasASCII ref= thisascii = a invert=false /> </div> ; } ;