🖥 支持环境

• 现代浏览器和 IE9 及以上。

📦 安装

>  npm install --save picture-verification-code

  import VerificationCode, { createCode } from 'picture-verification-code';

  const code = new VerificationCode();
  
  // 生成随机验证码
  const vcode = createCode();

  // 生成验证码图片 DataURL
  const imgSrc = code.render(vcode);

🔨 示例

  /** 设置背景白色 默认背景色随机 */
  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 实例对象, 包含以下方法及属性;

VerificationCode属性

|属性名|说明| |-|-| |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() 设置

createCode()

本组件提供验证码生成方法，若验证码需要前端自己生成，可以采用此方法，默认生成长度为4位的验证码，数字+字母组合

更新日志

• v1.0.0
  发布验证码图片生成器

🔗 链接

• 项目地址
• my portfolio

🤝 参与共建

• author zhangjicheng
• Email [email protected]