captcha-image

A simple captcha image generator.

Programming language: JavaScript

Tags: UI Components     Miscellaneous    

README

Captcha Image Generator

A simple captcha image generator.

Install

• npm install captcha-image
• yarn add captcha-image

Example

Play with sandbox example here: Demo

Options

You can pass following parameters to Captcha instance in order to generate custom Captcha image

Attributes	Values
font / String	'35px Arial'
align / String	'center'
baseline / String	'middle
width / Number	300
height / Number	150
bgColor / String	#eee
color / String	#222
length / Number / Length of text	7

Events

• createImage() method return HTML element parsed as String

Output

Final outcome looks like this:

<img src="..." data-key="..." />

Demo Usage

React

import Captcha from 'captcha-image';

const captchaImage = new Captcha(
  '35px Arial',
  'center',
  'middle',
  300,
  150,
  '#eee',
  '#111',
  6
).createImage();

function createMarkup(source) {
  return { __html: source };
}

function MyCaptcha() {
  return <div dangerouslySetInnerHTML={createMarkup(captchaImage)} />;
}

function App() {
  return (
    <div className='App'>
      <MyCaptcha />
    </div>
  );
}

export default App;