egg图形验证码captchapng图文详解

序：

        1、这篇应该是比较全了，博主找半天、测半天、写博客写半天。。。。你不点赞对得起我吗

        2、其实有另一款 网上分享比较多的验证码插件，但是是。。。svg的。要看的 去博主另一篇→传送门eggjs验证码svg-captcha图文详解_xuelang532777032的博客-CSDN博客

        3、为什么一定要图形的验证码？因为你就算自己项目svg的图片勉强也可以实现，但是对接第三方人家要你img的时候，你是不是就悲剧。

        4、关于egg-swagger-doc无法返回图形验证码的问题博主也写了解决方案，先收藏吧，留着后面备用----》egg-swagger-doc 图形验证码解决方案_雪狼之夜的博客-CSDN博客

来，正题

1、先安装依赖

cnpm install captchapng -S

2、controller层   

这步其实多余，反正先按我的来嘛，你要删再删

 /**
      * @summary 验证码
      * @description 测试swagger文档是否可用
      * @router get /api/verify
      * @response 200 allString
      */
    async verify() {
        const { ctx } = this;
        // service方法
        let captcha = await this.service.user.captcha();
        // 返回的类型格式
        debugger
        // ctx.response.type = 'image/svg+xml'; //svg验证码
        ctx.response.type = 'image/png';   //base64图形验证码
        ctx.body = {
            code:200,
            data:captcha,
            msg:"查询成功" 
        }
    }

 

3、service层

引入captchapng组件，注意目录，我是放在service/user.js,所以上面我才是调用this.service.user.captcha()

const captchapng = require('captchapng');//base64图形验证码

 添加方法

//base64图形验证码
	async captcha() {
		let m=this;
	    // 第三方插件，
	    let captchaVal=parseInt(Math.random()*9000+1000)
	    var p = new captchapng(80,30,captchaVal); // width,height,numeric captcha
        p.color(0, 0, 0, 0);  // First color: background (red, green, blue, alpha)
        p.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha)
        var img = p.getBase64();
	    //验证码存redis
	    await m.app.redis.get('db1').set(m.ctx.request.ip,captchaVal,"EX",60)  //ex是写死的，60是秒
	    return "data:image/png;base64,"+img;
	}

这里前端ajax时是 返回  图片base64，前端断点下就知道怎么处理了，直接放img 的 src,

博主原创，转发请附上本博文链接