ConvertTextToImage

Component for ReactJS for convert text to image.

by Dmitry Kalinin

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
</div>

Babel + JSX

class TextToImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      img: ''
    };
  }

  componentDidMount() {
    let canvasTxt = document.getElementById("canvasComponent").getContext("2d");
    canvasTxt.canvas.width = canvasTxt.measureText(this.props.name).width;
    canvasTxt.fillText(this.props.name, this.props.x, this.props.y);
    this.setState({
      img: canvasTxt.canvas.toDataURL()
    });
  }

  render() {
    return (
      <div>
        <canvas id="canvasComponent" style={{ display: "none" }} />
        {this.state.img.length > 0 ?
            <img id="imageComponent" src={this.state.img} />
        : null}
      </div>
    );
  }
}

ReactDOM.render(
  <TextToImage name="Hello world!" x="0" y="10" />,
  document.getElementById("container")
);