验证码图片 图片素材,前端实现验证码功能
1 .定义验证码工具类captchautilpackagecom.zzq.AMS.util； import com.zzq.AMS.model.captcha image； import java.awt.*； import Java.awt.image.buffered image； import java.util.*； import java.util.List；/* * @ authorzzq * @ projectams-simple * @ description验证码工具* @ date 2021/3/422336047 */publicclasscaptchautil { pril } //图像宽度privatestaticfinalintimgheight=150； //图像高度privatestaticfinalintfontsize=70； //字体大小privatestaticfinalintfontsizefloat=10； //字体大小浮动值privatestaticfinalintlinecount=10； //线数privatestaticfinalfloatnoiserage=0.05 f； //噪声率privatestaticfinalintcharspace=15； //认证码字符间隔privatestaticfinalintfrontcolor=220； //前景色RGB值privatestaticfinalintfrontcolorfloat=20； //前景色浮动值privatestaticfinalintbackcolor=100； //背景色RGB值privatestaticfinalintbackcolorfloat=20； //背景色浮动值privatestaticfinalintmincodelen=4； //最短认证码字符数privatestaticfinalintmaxcodelen=5； //最长认证码字符数private static final Character[]快狼； //认证码的基本字符数组privatestaticfinalstring [ ] font name arr； //字体名称数组static { //默认字体liststringfontnames=new ArrayList (； fontnames.add(Cambria )； fontnames.add(Arial )； fontnames.add(comicsansms )； fontnames.add(consolas )； fontnames.add(Lucidaconsole )； fontnames.add(Microsoftyaheiui )； fontnames.add(segoeprint )； //集合传送数组font name arr=new string [ font names.size () ]； fontnames.toArray(fontnameArr )； //基本字符排列[0-9a-zA-Z]快狼=new Character[62]； int i=0； for(charj='0)； j='9'； j ) )快速狼(I )=j； }for(charj='a ' )； j='z '； j ) )快速狼(I )=j； }for(charj='a ' )； j='Z '； j ) )快速狼(I )=j； (//序列变换集合listcharactermdxn=arrays.as list ) )快速野狼)； //随机//collections.shuffle(mdxn )//转录组mdxn.toArray )快速野狼)； } /** *要获取认证码的* * @return图像认证码*/publicstaticcaptchaimagegetcaptchaimage ({ bufferedimage=newbufferedimage )BufferedImage.TYPE_INT_BGR); Graphics graph = image.getGraphics(); //设置背景 graph.setColor(getRandColor(frontColor, frontColorFloat)); //背景色 graph.fillRect(0, 0, imgWidth, imgHeight); //填充矩形尺寸 //设置字体 Font font = getRandFont(fontSize, fontSizeFloat); graph.setFont(font); //绘制干扰线 drawRandLine(graph, lineCount, imgWidth, imgHeight); //添加噪点 addNoisePoint(image, noiseRage, imgWidth, imgHeight); //绘制字符 String code = getRandChars(minCodeLen, maxCodeLen); drawCaptcha(graph, code); return CaptchaImage.of(code, image); } /** * 绘制验证码 * * @param graph 图像 * @param captcha 验证码 */ private static void drawCaptcha(Graphics graph, String captcha) { char[] 迅速的野狼 = captcha.toCharArray(); for (int i = 0; i < 迅速的野狼.length; i++) { Font font = getRandFont(fontSize, fontSizeFloat); int bottom = imgHeight - font.getSize(); //底部距离 graph.setColor(getRandColor(backColor, backColorFloat)); graph.drawString(String.valueOf(迅速的野狼[i]), i * font.getSize() + charSpace, bottom); } } /** * 添加图片噪点 * * @param image 图片 * @param noiseRate 噪声率 */ private static void addNoisePoint(BufferedImage image, float noiseRate, int imgWidth, int imgHeight) { int area = (int) (noiseRate * imgWidth * imgHeight); for (int i = 0; i < area; i++) { int x = random.nextInt(imgWidth); int y = random.nextInt(imgHeight); int rgb = random.nextInt(256); image.setRGB(x, y, rgb); } } /** * 绘制随机线条 * * @param graph 图像 * @param lineCount 线条数 * @param imgWidth 图片宽度 * @param imgHeight 图片高度 */ private static void drawRandLine(Graphics graph, int lineCount, int imgWidth, int imgHeight) { for (int i = 0; i < lineCount; i++) { int x1 = random.nextInt(imgWidth); int y1 = random.nextInt(imgHeight); int x2 = random.nextInt(imgWidth); int y2 = random.nextInt(imgHeight); graph.setColor(getRandColor(50, 30)); graph.drawLine(x1, y1, x2, y2); } } /** * 生成随机字体 * * @param size 字体最ykdxf * @param floatValue 浮动值 * @return 字体对象 */ private static Font getRandFont(int size, int floatValue) { int minFontSize = size - floatValue; int maxFontSize = size + floatValue; String fontName = fontNameArr[random.nextInt(fontNameArr.length)]; int fontStyle = random.nextInt(3); int fontSize = random.nextInt(maxFontSize - minFontSize + 1) + minFontSize; return new Font(fontName, fontStyle, fontSize); } /** * 生成随机颜色 * * @param rgbVal 颜色基本值 * @param floatVal 浮动值 * @return 颜色对象 */ private static Color getRandColor(int rgbVal, int floatVal) { if (rgbVal > 255) { rgbVal = 255; } int min = rgbVal - floatVal; if (min < 0) { min = 0; } int max = rgbVal + floatVal; if (max > 255) { max = 255; } int r = random.nextInt(max - min + 1) + min; int g = random.nextInt(max - min + 1) + min; int b = random.nextInt(max - min + 1) + min; return new Color(r, g, b); } /** * 生成随机字符串 * * @param minLen 最小长度 * @param maxLen 最大长度 * @return 字符串 */ private static String getRandChars(int minLen, int maxLen) { int len = random.nextInt(maxLen - minLen + 1) + minLen; char[] randCharArr = new char[len]; for (int j = 0; j < len; j++) { randCharArr[j] = 迅速的野狼[random.nextInt(62)]; //26*2+10 } return String.valueOf(randCharArr); }} 2.配置图片消息转换器 /** * @author zzq * @project ams-simple * @description mvc配置 * @date 2021/3/4 1:00 */@Configurationpublic class WebConfig implements WebMvcConfigurer { @Override public void extendMessageConverters(List<HttpMessageConverter<?>> converters) { //注册图片消息转换器 converters.add(new BufferedImageHttpMessageConverter()); }} 3.Controller代码 @RequestMapping("/login")@Controllerpublic class LoginController extends BaseController { @RequestMapping(value = "/captcha", produces = MediaType.IMAGE_JPEG_VALUE) @ResponseBody public BufferedImage captcha(HttpServletResponse response) { //获取验证码图片 CaptchaImage captchaImage = CaptchaUtil.getCaptchaImage(); //获取验证码 String code = captchaImage.getCode(); System.err.println(code); //通知浏览器不缓存 response.setHeader("cache-control","no-store"); return captchaImage.getImage(); }} 4.页面部分代码 <div class="layui-form-item"> <label class="layui-icon layui-icon-vercode" for="captcha"></label> <input type="text" id="captcha" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="xszg"> <div class="captcha-img"> <img id="captchaPic" src=""> </div> </div> //JS：点击切换验证码图片 $("#captchaPic").click(function () { $(this).attr("src", "/login/captcha"); }); 5.几张效果图