Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tpkahlon/captcha-image
A simple captcha image generator.
https://github.com/tpkahlon/captcha-image
Last synced: 2 months ago
JSON representation
A simple captcha image generator.
- Host: GitHub
- URL: https://github.com/tpkahlon/captcha-image
- Owner: tpkahlon
- Created: 2020-06-20T20:51:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-06-20T23:17:12.000Z (over 4 years ago)
- Last Synced: 2024-10-09T21:34:42.590Z (4 months ago)
- Language: JavaScript
- Size: 11.7 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - captcha-image - Allows you to generate a random captcha image with options. (UI Components / Miscellaneous)
- awesome-react-components - captcha-image - Allows you to generate a random captcha image with options. (UI Components / Miscellaneous)
- fucking-awesome-react-components - captcha-image - Allows you to generate a random captcha image with options. (UI Components / Miscellaneous)
- awesome-react-components - captcha-image - Allows you to generate a random captcha image with options. (UI Components / Miscellaneous)
- awesome-react-components - captcha-image - Allows you to generate a random captcha image with options. (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](https://codesandbox.io/s/focused-butterfly-qv2go?file=/src/App.js)
## Options
You can pass following parameters to Captcha instance in order to generate custom Captcha image
| Attributes | Values |
| ----------------------------------------------------------------------------------------------------------- | ------------ |
| [font](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font) / String | '35px Arial' |
| [align](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) / String | 'center' |
| [baseline](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline) / 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:
```html
```
## Demo Usage
### React
```js
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
;
}
function App() {
return (
);
}
export default App;
```