如何往自己的项目中添加图形验证码？——Java

原创已于 2023-04-13 17:38:42 修改 · 878 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #开发语言

于 2023-04-13 17:38:07 首次发布

Java 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用Hutool库在Java后端生成图片验证码，并通过Base64编码传输到前端展示。文章详细讲解了Base64编码的过程，以及前端如何解码显示图片。

近来笔者在自己写项目，突发奇想，想在登录界面加一个图片验证码（看起来更加高大上🤭），从而去网上查询相关资料，发现要么就是囫囵吞枣式汇报，要不然就是几张截图让读者自己去猜到底怎么做的。也正是由于网上我没找到很好的方法，导致我面试的时候被问到这个东西，我没答上来，我真是栓Q！！！我曾经一度以为我要做不成这个功能了，结果在我的不懈努力下，我还是做出来了！（大佬走开，无意冒犯，我是菜鸡）啊哈哈哈哈哈哈哈哈哈哈~~~（别管，咱就是说计算机人真的很容易疯！）

效果图：

这个验证码其实是一个图片，由于笔者审美低下，故这张验证码图片看似整体布局不太和谐，但读者你们可以自行进行图片的大小调整。

一、hutool

当我们想要新开发一个功能的时候，特别是在我们还在新手村的时候，可以去看看大佬们都做了些什么。站在巨人的肩膀上真的很爽！

这里给大家推荐一款国产良心工具包：（真的很好用！谁不用谁后悔！）

https://hutool.cn/docs/#/

而关于图形验证码，糊涂早已经给了我们答案：（点开就能看！超详细！）

记得在使用其功能前，按照文档提示进行安装哦！（以下举例其中一种安装方法，引入maven依赖）：

二、将图片转换成base64格式输出

至于怎么样形成图片验证码，以及怎么样调整图片验证码，hutool中都有做很详细的介绍，一看就懂，这里就不再过多的做详细介绍了。

当我们拿到验证码图片后，我们应该怎么将其传送给前端呢？也就是怎样将图片文件进行编码，然后客户端在拿到图片的时候可以很好的将其进行解码并且不乱码呢？

Base64编码很好的解决了这个问题。

Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法，由于 2^6=64，所以每 6 个比特为一个单元，对应某个可打印字符。

Base64 常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。

在Java中，也有Base64基本类对文件进行Base64编码。

//将图片以base64格式输出
        FileInputStream inputStream = null;
        String base64str = "";
        try {
            Base64.Encoder encoder = Base64.getEncoder();
            //此处的file为验证码图片文件
            inputStream = new FileInputStream(file);
            int available = inputStream.available();
            byte[] bytes = new byte[available];
            inputStream.read(bytes);
            //得到base64编码后的验证码图片文件字符串
            base64str = encoder.encodeToString(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            inputStream.close();
        }

将base64编码后的验证码图片文件字符串传给前端即可

三、前端对Base64字符串进行解码

当服务器传来base64字符串时，客户端要怎样将其转换成图片呢？（注意格式）

function initCheck(){
            let check=jQuery("#check-picture");
            jQuery.ajax({
                url:"/pic/getcheck",
                type:"GET",
                data:{},
                success:function(result){
                    if(result.code!=200||result.data==null){
                        alert("Failed to get verification code!");
                        checkstr="";
                        check.attr('src','#');
                        return ;
                    }
                    checkstr=result.data.res;
                    //result.data.img及为服务器穿过来的base64字符串
                    check.attr('src','data:image/gif;base64,'+result.data.img);
                }
            });
        }

src中的字符串格式应为：'data:image/gif;base64,'+base64字符串

此时客户端就会自动将base64字符串转化为图片，呈现在页面上啦！

完整代码：

服务器端：

@RequestMapping("/pic")
@RestController
public class PictureController {

    @RequestMapping("/getcheck")
    public UnitResult getCheck(HttpServletResponse response) throws IOException {
        LineCaptcha captcha = CaptchaUtil.createLineCaptcha(80, 30, 4, 100);
        File file = new File("src/main/resources/static/img/captcha.jpg");
        captcha.write(file);
        //将图片以base64格式输出
        FileInputStream inputStream = null;
        String base64str = "";
        try {
            Base64.Encoder encoder = Base64.getEncoder();
            //此处的file为验证码图片文件
            inputStream = new FileInputStream(file);
            int available = inputStream.available();
            byte[] bytes = new byte[available];
            inputStream.read(bytes);
            base64str = encoder.encodeToString(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            inputStream.close();
        }
        HashMap<String, Object> map = new HashMap<>();
        map.put("res", captcha.getCode());
        map.put("img", base64str);
        return UnitResult.success(map);
    }
}

客户端：

 // 加载成功后获取验证码功能
        let checkstr="";

        function initCheck(){
            let check=jQuery("#check-picture");
            jQuery.ajax({
                url:"/pic/getcheck",
                type:"GET",
                data:{},
                success:function(result){
                    if(result.code!=200||result.data==null){
                        alert("Failed to get verification code!");
                        checkstr="";
                        check.attr('src','#');
                        return ;
                    }
                    checkstr=result.data.res;
                    check.attr('src','data:image/gif;base64,'+result.data.img);
                }
            });
        }
        initCheck();