Picture verification code
npm install picture-verification-codebash
> npm install --save picture-verification-code
`
` js
import VerificationCode, { createCode } from 'picture-verification-code';
const code = new VerificationCode();
// 生成随机验证码
const vcode = createCode();
// 生成验证码图片 DataURL
const imgSrc = code.render(vcode);
`
🔨 示例
`js
/* 设置背景白色 默认背景色随机 /
code.setBgColor('#fff');
/* 设置背景图片 /
const img = document.createElement('img');
img.src = '...';
img.onload = function() {
code.setBgImg(img);
verificationCode();
}
/* 设置图片宽高 /
// 实例化设置宽高
const code = new VerificationCode(100, 40);
// 通过实例方法修改宽高
code.setWidth(100);
code.setHeight(40);
/* 生成验证码图片 /
code.render('AB12');
/* 生成随机验证码 /
// 若需要自己生成验证码，组件提供了生成随机验证码方法以供使用
import { createCode } from 'picture-verification-code'
const vcode = createCode();
`
参数及使用说明
> new VerificationCode() 会返回一个 VerificationCode 实例对象, 包含以下方法及属性;
$3
|属性名|说明|
|-|-|
|code|验证码数组|
|bgColor|验证码背景色|
|bgImage|验证码背景图|
|size|验证码大小|
|width|验证码宽度|
|height|验证码高度|
|canvas|绘制的验证码 canvas|
|ctx|canvas.getContext('2d')|
|setBgColor()|设置验证码背景色|
|setBgImg()|设置验证码背景图|
|setWidth()|设置验证码宽度|
|setHeight()|设置验证码高度|
|render()|绘制验证码，返回 DataUrl|
注意：
- size 是根据验证码长度，图片宽高自动计算的，不建议手动修改 size 有可能会影响验证码显示，导致显示不全
- new VerificationCode() 实例化接收两个参数 width、height, 您可以在初始化时就定义好宽高，也可以通过 setWidth()、setHeight() 来设置宽高，另外，宽度我们有一套计算规则，若您设置的宽度小于代码计算的宽度，则会以系统计算的为主，这是为了防止验证码过长，而画布过窄导致验证码显示不全的问题。我们建议您使用默认宽度，即实例化不必传参，高度通过 setHeight()` 设置