先看效果：

图片验证码的作用

图片验证码经常验证如下一些场景。（1）用户登录，防止机器人登录；（2）论坛留言，防止恶意灌水；（3）短信验证码发送，防止盗刷短信。

Kaptcha简介

Kaptcha 是一个由谷歌Googel出品的可高度配置的实用验证码生成工具，是一个非常经典的图片验证码解决方案。但，这个开源的工具生成的图片比较素雅，美观度一般，且项目已经基本不维护了，从github上看，最近的一次更新是在3年前。

EasyCaptcha简介

EasyCaptcha是一个Java图形验证码库，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。效果还是非常好看的，还有闪动效果。关键是该开源项目是国人开发，使用也超简单。

划重点：若依系统RuoYi-Vue中替换为EasyCaptcha

（1）在ruoyi-framework\pom.xml添加依赖：

<!-- 验证码EasyCaptcha依赖  -->
<dependency>
				<groupId>com.github.whvcse</groupId>
				<artifactId>easy-captcha</artifactId>
				<version>1.6.2</version>
</dependency>
<!-- 原有的验证码kaptcha依赖不需要可以删除  -->

（2）在应用子系统中修改验证码生成的代码，比如ruoyi-admin的CaptchaController中修改getCode方法的代码：

/**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    @ApiOperation(value = "生成验证码", notes = "生成验证码")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        AjaxResult ajax = AjaxResult.success();
        boolean captchaOnOff = configService.selectCaptchaOnOff();
        ajax.put("captchaOnOff", captchaOnOff);
        if (!captchaOnOff)
        {
            return ajax;
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
/*  以下注释的部分是原代码
注释开始
        String capStr = null, code = null;
        BufferedImage image = null;

        // 生成验证码
        String captchaType = RuoYiConfig.getCaptchaType();
        if ("math".equals(captchaType))
        {
            String capText = captchaProducerMath.createText();
            capStr = capText.substring(0, capText.lastIndexOf("@"));
            code = capText.substring(capText.lastIndexOf("@") + 1);
            image = captchaProducerMath.createImage(capStr);
        }
        else if ("char".equals(captchaType))
        {
            capStr = code = captchaProducer.createText();
            image = captchaProducer.createImage(capStr);
        }

        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        // 转换流信息写出
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try
        {
            ImageIO.write(image, "jpg", os);
        }
        catch (IOException e)
        {
            return AjaxResult.error(e.getMessage());
        }

        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
注释结束*/
      //以下6行是新加的代码
        Captcha captcha = new ArithmeticCaptcha(115, 42);  //创建算术验证码
        String code = captcha.text(); //得到算术验证码的计算值
        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);//存入redis

        ajax.put("uuid", uuid);
        ajax.put("img", captcha.toBase64());  //获得图片的base64编码
        return ajax;
    }

（3）在前端项目中，RuoYi-Vue3\src\views\login.vue的getCode方法中修改如下：

function getCode() {
  getCodeImg().then(res => {
    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
    if (captchaOnOff.value) {
      codeUrl.value = res.img;  //"data:image/gif;base64," + res.img;
      loginForm.value.uuid = res.uuid;
    }
  });
}

说明：因为上一步中控制器返回的img中已经包含了"data:image/gif;base64,"这一串字符，故前端接收时就不要再加了。

（4）再分别重启前后端系统，就可以看到效果了。

【本文结束】

学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。