code-validator

前端验证码生产器

install

yarn add code-validator
# OR  npm install code-validator --save 

import

import { CodeValidator } from "code-validator";

guide

const cv = new CodeValidator();
 
const res = cv.random();

in angular

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
import { CodeValidator } from 'code-validator'
 
@Component({
  selector: 'my-app',
  template: `
  <img [src]="base64" (click)="random()"/>
  <h3>{{value}}</h3>
  `
})
export class AppComponent implements OnInit {
  base64: SafeUrl
  value: string
  cv = new CodeValidator({
    width:160,
    height:50,
    length:5
  })
 
  constructor(private sanitizer: DomSanitizer) { }
 
  ngOnInit() {
    this.random()
  }
  random() {
    let res = this.cv.random()
    this.base64 = this.sanitizer.bypassSecurityTrustUrl(res.base)
    this.value = res.value
  }
}

more

interface

export class CodeValidator {
  constructor(options?: { width?: number; height?: number; length?: number });
  random(): { base: string; value: string };
}

constructor options

参数	默认值	说明
width	100	图片宽度
height	30	图片高度
length	4	验证码长度

random return

参数	说明
base	验证码图片的 base64 编码
value	图片高度

example