• 生成验证码图片

    引入依赖包

    2. <dependency>
    3.     <groupId>com.github.pengglegroupId>
    4.     <artifactId>kaptchaartifactId>
    5.     <version>2.3.2version>
    6. dependency>

     配置DefaultKaptcha类

    类方法配置了验证码的生成格式和规则，并返回一个DefaultKaptcha对象并注入到Spring中

    1. package com.dream.datacenter.config;
    2.  
    3. import com.google.code.kaptcha.impl.DefaultKaptcha;
    4. import com.google.code.kaptcha.util.Config;
    5. import org.springframework.context.annotation.Bean;
    6. import org.springframework.stereotype.Component;
    7.  
    8. import java.util.Properties;
    9.  
    10. /**
    11.  * Created with IntelliJ IDEA
    12.  * 图形验证码属性配置
    13.  * @Author: Mr.HPC
    14.  * @Date: 2022/1/6 23:08
    15.  * @Version 1.0
    16.  */
    17. @Component
    18. public class CodeImgConfig {
    19.     @Bean
    20.     public DefaultKaptcha getDefaultKaptcha() {
    21.         DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
    22.         Properties properties = new Properties();
    23.         // 图片边框
    24.         properties.setProperty("kaptcha.border", "no");
    25.         // 边框颜色
    26.         properties.setProperty("kaptcha.border.color", "black");
    27.         //边框厚度
    28.         properties.setProperty("kaptcha.border.thickness", "1");
    29.         // 图片宽
    30.         properties.setProperty("kaptcha.image.width", "200");
    31.         // 图片高
    32.         properties.setProperty("kaptcha.image.height", "50");
    33.         //图片实现类
    34.         properties.setProperty("kaptcha.producer.impl", "com.google.code.kaptcha.impl.DefaultKaptcha");
    35.         //文本实现类
    36.         properties.setProperty("kaptcha.textproducer.impl", "com.google.code.kaptcha.text.impl.DefaultTextCreator");
    37.         //文本集合，验证码值从此集合中获取
    38.         properties.setProperty("kaptcha.textproducer.char.string", "01234567890");
    39.         //验证码长度
    40.         properties.setProperty("kaptcha.textproducer.char.length", "4");
    41.         //字体
    42.         properties.setProperty("kaptcha.textproducer.font.names", "宋体");
    43.         //字体颜色
    44.         properties.setProperty("kaptcha.textproducer.font.color", "black");
    45.         //文字间隔
    46.         properties.setProperty("kaptcha.textproducer.char.space", "5");
    47.         //干扰实现类
    48.         properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");
    49.         //干扰颜色
    50.         properties.setProperty("kaptcha.noise.color", "blue");
    51.         //干扰图片样式
    52.         properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
    53.         //背景实现类
    54.         properties.setProperty("kaptcha.background.impl", "com.google.code.kaptcha.impl.DefaultBackground");
    55.         //背景颜色渐变，结束颜色
    56.         properties.setProperty("kaptcha.background.clear.to", "white");
    57.         //文字渲染器
    58.         properties.setProperty("kaptcha.word.impl", "com.google.code.kaptcha.text.impl.DefaultWordRenderer");
    59.         Config config = new Config(properties);
    60.         defaultKaptcha.setConfig(config);
    61.         return defaultKaptcha;
    62.     }
    63. }

    Controller 请求方法

    1. package com.dream.datacenter.controller;
    2.  
    3.  
    4. import com.dream.datacenter.shiro.JWTUtil;
    5. import com.dream.datacenter.utils.ImageUtil;
    6. import com.google.code.kaptcha.impl.DefaultKaptcha;
    7. import io.jsonwebtoken.Claims;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.data.redis.core.RedisTemplate;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.RestController;
    12.  
    13. import javax.annotation.Resource;
    14. import javax.servlet.http.HttpServletRequest;
    15. import javax.servlet.http.HttpServletResponse;
    16. import java.util.HashMap;
    17. import java.util.concurrent.TimeUnit;
    18.  
    19. @RestController
    20. @RequestMapping("/test")
    21. public class testController {
    22.  
    23.     public static final String VERIFICATION_CODE = "verificationCode_";
    24.  
    25.     @Autowired
    26.     public RedisTemplate redisTemplate;
    27.  
    28.  
    29.     @Resource
    30.     private DefaultKaptcha captcha;
    31.  
    32.     /**
    33.      * 第一种方式
    34.      * 使用DefaultKaptcha生成登录验证码图片
    35.      * 转成base64编码的字符串输出到前端
    36.      * 实际项目这里还要加入JWT令牌校验和redis缓存
    37.      */
    38.     @RequestMapping(value = {"/loginValidateCode"})
    39.     public String loginValidateCode(HttpServletRequest request, HttpServletResponse response) throws Exception{
    40.         response.setDateHeader("Expires", 0);
    41.         // Set standard HTTP/1.1 no-cache headers.
    42.         response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
    43.         // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
    44.         response.addHeader("Cache-Control", "post-check=0, pre-check=0");
    45.         // Set standard HTTP/1.0 no-cache header.
    46.         response.setHeader("Pragma", "no-cache");
    47.         // return a jpeg
    48.         response.setContentType("image/jpeg");
    49.  
    50.         // 生成图片验证码内容
    51.         String capText = captcha.createText();
    52.         // 获取用户的jwt令牌
    53.         String userVerificationJwt = request.getHeader(JWTUtil.JWT_VERIFICATION_KEY);
    54.         //验证码令牌
    55.         Claims claims = JWTUtil.validateJwtToken(userVerificationJwt);
    56.         if(claims == null){
    57.             //如果用户令牌过期那么对应存放在redis中的数据也要清空
    58.             if(!org.apache.commons.lang3.StringUtils.isEmpty(userVerificationJwt)){
    59.                 redisTemplate.expire(VERIFICATION_CODE + userVerificationJwt, 1, TimeUnit.DAYS);
    60.             }
    61.             //重新生成用户令牌
    62.             userVerificationJwt =  JWTUtil.createJwt(new HashMap() ,JWTUtil.EXPIRE_TIME);
    63.             //将jwt令牌放入 response head中
    64.             response.setHeader(JWTUtil.JWT_VERIFICATION_KEY, userVerificationJwt);
    65.         }
    66.         //刷新缓存，更新验证码
    67.         redisTemplate.opsForValue().set(VERIFICATION_CODE + userVerificationJwt , capText,60, TimeUnit.SECONDS);
    68.         System.out.println(capText);
    69. //        ImageUtil.validateCode(response,captcha,capText);
    70.         //生成图片
    71.         String code = "data:image/png;base64," + ImageUtil.validateCode(captcha,capText);
    72.         return code;
    73.     }
    74.  
    75.     /**
    76.      * 第二种方式
    77.      * 使用Graphics绘图来定制格式，生成验证码
    78.      * 转成base64编码的字符串输出到前端
    79.      */
    80.     @RequestMapping(value = {"/loginValidateCode1"})
    81.     public String loginValidateCode1(HttpServletRequest request, HttpServletResponse response) throws Exception{
    82.         response.setDateHeader("Expires", 0);
    83.         // Set standard HTTP/1.1 no-cache headers.
    84.         response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
    85.         // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
    86.         response.addHeader("Cache-Control", "post-check=0, pre-check=0");
    87.         // Set standard HTTP/1.0 no-cache header.
    88.         response.setHeader("Pragma", "no-cache");
    89.         // return a jpeg
    90.         response.setContentType("image/png");
    91.  
    92.         String str = captcha.createText();//使用DefaultKaptcha规则生成随机码
    93.  
    94.         //生成图片
    95.         String code = "data:image/png;base64," + ImageUtil.createImageWithVerifyCode(str,200,50);
    96.         return code;
    97.     }
    98.  
    99.     /**
    100.      * 第三种方式
    101.      * 使用DefaultKaptcha生成登录验证码图片
    102.      * 并用文件流方式输出到前端
    103.      */
    104.     @RequestMapping(value = {"/loginValidateCode2"})
    105.     public void loginValidateCode2(HttpServletRequest request, HttpServletResponse response) throws Exception{
    106.         response.setDateHeader("Expires", 0);
    107.         // Set standard HTTP/1.1 no-cache headers.
    108.         response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
    109.         // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
    110.         response.addHeader("Cache-Control", "post-check=0, pre-check=0");
    111.         // Set standard HTTP/1.0 no-cache header.
    112.         response.setHeader("Pragma", "no-cache");
    113.         // return a jpeg
    114.         response.setContentType("image/png");
    115.  
    116.         ImageUtil.validateCode(response,captcha,captcha.createText());
    117.  
    118.     }
    119.  
    120. }

     ImageUtil公共类

    1. package com.dream.datacenter.utils;
    2.  
    3. import com.google.code.kaptcha.impl.DefaultKaptcha;
    4. import java.util.Base64;
    5. import java.util.Base64.Encoder;
    6.  
    7. import javax.imageio.ImageIO;
    8. import javax.servlet.ServletOutputStream;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.awt.*;
    11. import java.awt.image.BufferedImage;
    12. import java.io.ByteArrayOutputStream;
    13. import java.io.IOException;
    14. import java.util.Random;
    15.  
    16. /**
    17.  * Created with IntelliJ IDEA
    18.  *
    19.  * @Author: Mr.HPC
    20.  * @Date: 2022/1/6 23:19
    21.  * @Version 1.0
    22.  * 验证码工具类
    23.  */
    24. public class ImageUtil {
    25.  
    26.     /**
    27.      * 第一种,用于IO输出
    28.      * @param captchaProducer 生成图片方法类
    29.      * @throws Exception
    30.      */
    31.     public static void validateCode(HttpServletResponse response,
    32.                                       DefaultKaptcha captchaProducer,String capText) throws Exception{
    33.         // create the image with the text
    34.         BufferedImage bi = captchaProducer.createImage(capText);
    35.         ServletOutputStream out = response.getOutputStream();
    36.         // write the data out
    37.         ImageIO.write(bi, "JPEG", out);
    38.         try {
    39.             out.flush();
    40.         } finally {
    41.             out.close();
    42.         }
    43.     }
    44.  
    45.     /**
    46.      * 第二种
    47.      * 生成验证码图片转 base64,用于方法请求后，将结果赋值到img标签src属性
    48.      * @param captchaProducer 生成图片方法类
    49.      * @throws Exception
    50.      */
    51.     public static String validateCode(DefaultKaptcha captchaProducer,String capText) throws Exception{
    52.         // create the image with the text
    53.         BufferedImage bi = captchaProducer.createImage(capText);
    54.         return returnPicBase64(bi);
    55.     }
    56.  
    57.     /**
    58.      * 第三种，生成验证码图片转 base64,用于方法请求后，将结果赋值到img标签src属性
    59.      * @param word 要生存的验证码随机字符串
    60.      * @param width 图片宽度
    61.      * @param height 图片高度
    62.      * @return base64 格式生成的验证码图片
    63.      * @throws IOException
    64.      */
    65.     public static String createImageWithVerifyCode(String word, int width, int height) throws IOException {
    66.         String png_base64="";
    67.         //绘制内存中的图片
    68.         BufferedImage bufferedImage = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    69.         //得到画图对象
    70.         Graphics graphics = bufferedImage.getGraphics();
    71.         //绘制图片前指定一个颜色
    72.         graphics.setColor(getRandColor(160,200));
    73.         graphics.fillRect(0,0,width,height);
    74.         //绘制边框
    75.         graphics.setColor(Color.white);
    76.         graphics.drawRect(0, 0, width - 1, height - 1);
    77.         // 步骤四 四个随机数字
    78.         Graphics2D graphics2d = (Graphics2D) graphics;
    79.         graphics2d.setFont(new Font("宋体", Font.BOLD, 18));
    80.         Random random = new Random();
    81.         // 定义x坐标
    82.         int x = 10;
    83.         for (int i = 0; i < word.length(); i++) {
    84.             // 随机颜色
    85.             graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
    86.             // 旋转 -30 --- 30度
    87.             int jiaodu = random.nextInt(60) - 30;
    88.             // 换算弧度
    89.             double theta = jiaodu * Math.PI / 180;
    90.             // 获得字母数字
    91.             char c = word.charAt(i);
    92.             //将c 输出到图片
    93.             graphics2d.rotate(theta, x, 20);
    94.             graphics2d.drawString(String.valueOf(c), x, 20);
    95.             graphics2d.rotate(-theta, x, 20);
    96.             x += 30;
    97.         }
    98.         // 绘制干扰线
    99.         graphics.setColor(getRandColor(160, 200));
    100.         int x1;
    101.         int x2;
    102.         int y1;
    103.         int y2;
    104.         for (int i = 0; i < 30; i++) {
    105.             x1 = random.nextInt(width);
    106.             x2 = random.nextInt(12);
    107.             y1 = random.nextInt(height);
    108.             y2 = random.nextInt(12);
    109.             graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
    110.         }
    111.         graphics.dispose();// 释放资源
    112.         return returnPicBase64(bufferedImage);
    113.     }
    114.  
    115.     /**
    116.      * 将图片字节数组码转为base64编码
    117.      * @param bi
    118.      * @return
    119.      * @throws IOException
    120.      */
    121.     private static String returnPicBase64(BufferedImage bi) throws IOException {
    122.         String png_base64;
    123.         ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
    124.         ImageIO.write(bi, "png", baos);//写入流中
    125.         byte[] bytes = baos.toByteArray();//转换成字节
    126. //        BASE64Encoder encoder = new BASE64Encoder();
    127. //        png_base64 = encoder.encodeBuffer(bytes).trim();
    128.         Encoder encoder = Base64.getEncoder();
    129.         png_base64 = encoder.encodeToString(bytes).trim();
    130.  
    131.         png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
    132.         return png_base64;
    133.     }
    134.  
    135.     /**设置随机颜色*/
    136.     private static Color getRandColor(int fc, int bc) {
    137.         // 取其随机颜色
    138.         Random random = new Random();
    139.         if (fc > 255) {
    140.             fc = 255;
    141.         }
    142.         if (bc > 255) {
    143.             bc = 255;
    144.         }
    145.         int r = fc + random.nextInt(bc - fc);
    146.         int g = fc + random.nextInt(bc - fc);
    147.         int b = fc + random.nextInt(bc - fc);
    148.         return new Color(r, g, b);
    149.     }
    150. }

    前端代码的调用

    test.js 文件

    1. // 图形校验码接口
    2. export const codeImgUrl = "/api/test/loginValidateCode";
    3.  
    4. export const codeImgUrl1 = "/api/test/loginValidateCode1";
    5. export const codeImgUrl2 = "/api/test/loginValidateCode2";

    yzm.vue 文件，其中 refreshCode2() 方法的 this.ruleForm.codeimg2 = window.URL.createObjectURL(blob); 是将图片io流转成浏览器可以识别的URL

    1. <template>
    2.     <div class="login-wrap">
    3.       <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
    4.         <el-row>
    5.  
    6.           <el-col :span="4" class="code-box">
    7.             <el-text>生成验证码图片转 base64,用于方法请求后，将结果赋值到img标签src属性el-text>
    8.             <img :src="ruleForm.codeimg" alt="验证码" class="codeimg" @click="refreshCode()">
    9.           el-col>
    10.           <el-col :span="4" class="code-box">
    11.             <el-text>生成验证码图片转 base64,用于方法请求后，将结果赋值到img标签src属性el-text>
    12.             <img :src="ruleForm.codeimg1" alt="验证码" class="codeimg" @click="refreshCode1()">
    13.           el-col>
    14.           <el-col :span="4" class="code-box">
    15.             <el-text>生成验证码图片转 base64,用于方法请求后，将结果赋值到img标签src属性el-text>
    16.             <img :src="ruleForm.codeimg2" alt="验证码" class="codeimg" @click="refreshCode2()">
    17.           el-col>
    18.         el-row>
    19.         
    20.       el-form>
    21.     div>
    22.   template>
    23.   
    24.   <script type="text/ecmascript-6">
    25.   import { codeImgUrl,codeImgUrl1,codeImgUrl2 } from '../../api/test';
    26.   import md5 from 'js-md5';
    27.   import axios from 'axios';
    28.   
    29.   
    30.   export default {
    31.     name: 'yzm',
    32.     data() {
    33.       return {
    34.         ruleForm: {
    35.           code: '',
    36.           codeimg: '',
    37.           codeimg1: '',
    38.           codeimg2: ''
    39.         },
    40.         //rules前端验证
    41.         rules: {
    42.           
    43.         }
    44.       }
    45.     },
    46.     // 创建完毕状态(里面是操作)
    47.     created() {
    48.       // 获取图形验证码
    49.       this.refreshCode()
    50.       this.refreshCode1()
    51.       this.refreshCode2()
    52.     },
    53.     methods: {
    54.       
    55.       //获取图形验证码
    56.       refreshCode() {
    57.         // this.ruleForm.codeimg = codeImgUrl+"?t="+Date.now();
    58.         let url = codeImgUrl+"?t="+Date.now();
    59.         axios.get(url).then(res => {
    60.             this.ruleForm.codeimg = res.data
    61.         }).catch(resp => {
    62.             console.log(resp);
    63.         });
    64.       },
    65.       refreshCode1() {
    66.         // this.ruleForm.codeimg = codeImgUrl+"?t="+Date.now();
    67.         let url = codeImgUrl1+"?t="+Date.now();
    68.         axios.get(url).then(res => {
    69.             this.ruleForm.codeimg1 = res.data
    70.         }).catch(resp => {
    71.             console.log(resp);
    72.         });
    73.       },
    74.       refreshCode2() {
    75.         // this.ruleForm.codeimg = codeImgUrl+"?t="+Date.now();
    76.         let url = codeImgUrl2+"?t="+Date.now();
    77.         axios.request({
    78.           url: url,
    79.           responseType: 'blob',
    80.           method: 'get'
    81.         }).then(res => {
    82.           let blob = new Blob([res.data], {
    83.             type: "image/png"
    84.           });
    85.           this.ruleForm.codeimg2 = window.URL.createObjectURL(blob);
    86.         }), (error) => {
    87.           this.$message({
    88.             type: 'warning',
    89.             message: '系统错误，请联系管理员!'
    90.           });
    91.         }
    92.       },
    93.     }
    94.   }
    95.   script>
    96.   
    97.   <style scoped>
    98.   
    99.   style>

  • 相关阅读:
    Linux常用命令 - 网络管理与通信命令
    Python有向图从起点到终点遍历所有路径
    C语言基础篇 —— 3-2 一文秒懂函数指针
    什么是子网掩码？
    如何给照片添加水印？请看下面3个简单教程
    链式队列----数据结构
    IM即时通讯开发之Android内存泄漏监控
    基于SpringBoot实现自动装配返回属性
    30-Openwrt config save and restore
    VB.net实战(VSTO)：Excel插件设计Ribbon界面
  • 原文地址：https://blog.csdn.net/weixin_35654814/article/details/136636608