zoukankan      html  css  js  c++  java
  • koa2 中使用 svg-captcha 生成验证码

    1. 安装svg-captcha

    $ npm install --save svg-captcha
    

    2. 使用方法

    1. 生成有4个字符的图片和字符串
    const svgCaptcha = require('svg-captcha')
    
    const cap = svgCaptcha.create({
        size: 4, // 验证码长度
        160,
        height:60,
        fontSize: 50,
        ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1i
        noise: 2, // 干扰线条的数量
        color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
        background: '#eee' // 验证码图片背景颜色
    })
    
    console.log(c);
    // {data: '<svg.../svg>', text: 'abcd'}
    
    

    如图:

    image

    1. 生成一个算术式和计算结果
     const cap = svgCaptcha.createMathExpr({
        size: 4, // 验证码长度
        160,
        height:60,
        fontSize: 50,
        ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1i
        noise: 2, // 干扰线条的数量
        color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
        background: '#eee' // 验证码图片背景颜色
    })
    

    如图:

    image

    3. 在 koa2 项目中使用

    const Koa = require('koa'); 
    const Router = require('koa-router') // koa 路由中间件 
    const svgCaptcha = require('svg-captcha')
    const app = new Koa();
    const router = new Router(); // 实例化路由 
    
    router.get('/home', async (ctx, next) => {
    
      const cap = svgCaptcha.create({
        size: 4, // 验证码长度
        160,
        height:60,
        fontSize: 50,
        ignoreChars: '0oO1ilI', // 验证码字符中排除 0o1i
        noise: 2, // 干扰线条的数量
        color: true, // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有
        background: '#eee' // 验证码图片背景颜色
      })
      
      let img = cap.data // 验证码
      let text = cap.text.toLowerCase() // 验证码字符,忽略大小写
      ctx.type = 'html'
      ctx.body = `${img}<br><a href="javascript: window.location.reload();">${text}</a>`
    });
    
    app.use(router.routes());
    
    app.listen(3333, () => {
      console.log('This server is running at http://localhost:' + 3333)
    })
    
  • 相关阅读:
    yii框架_用户登录
    判断变量是否定义
    ajax小结
    yii框架_1
    yii框架_1_简单模型搭建与应用
    Greedy Gift Givers
    C# 音量控制 静音 等
    Fidelity Job Opportunities
    SPSiteDataQuery
    eBooks on html javascript & css
  • 原文地址:https://www.cnblogs.com/cckui/p/10552832.html
Copyright © 2011-2022 走看看