一、生成随机图片的java工具类
package com.xh.commen;
import java.awt.*;
import java.awt.image.BufferedImage;
public class ImageUtil {
private static String code=""; //记录下随机字母或数字
/**
* 获取生成图片验证码
* */
public static BufferedImage getImage(){
//每次都要清空code
code="";
//新建一个150*50的画布
BufferedImage bufferedImage = new BufferedImage(150,50,BufferedImage.TYPE_INT_RGB);
//获得画笔
Graphics graphics = bufferedImage.getGraphics();
//设置颜色
graphics.setColor(new Color(210,210,210));
//填充一个从(0,0)【左上角】开始的矩形,颜色为之前设置的
graphics.fillRect(0,0,150,50);
//在画布上写字
drowString(graphics);
//在画布上画随机花点
drowDian(graphics);
//在画布上画随机划线
drowLine(graphics);
//在画布上画随机弧线
drowArc(graphics);
return bufferedImage;
}
//产生随机的4个字母或数字
public static void drowString(Graphics graphics){
graphics.setFont(new Font("楷体",Font.ITALIC,24));
String dbString ="1234567890qwertyuioplkjhgfdsazxcvbnm" +
"QWERTYUIOPLKJHGFDSAZXCVBNM";
for(int i = 1; i <= 4 ;i++){
char s = dbString.charAt((int)(Math.random()*dbString.length()-1));
String s1 = String.valueOf(s);
code = code+s1;
//生成随机的颜色
graphics.setColor(new Color((int)(Math.random()*200),(int)(Math.random()*200),(int)(Math.random()*200)));
//设置字出现的位置,字符会上下跳,数字根据自己的情况定
graphics.drawString(s1,24*i,(int)(Math.random()*9+30));
}
}
//获取产生的随机字符串
public static String getCodeString(){
return code;
}
//绘制8个随机点,随机位置根据自己的画布大小定
public static void drowDian(Graphics graphics){
for(int i = 1; i<=8;i++){
graphics.fillOval((int)(Math.random()*145),
(int)(Math.random()*47),(int)(Math.random()*6),
(int)(Math.random()*6));
}
}
//绘制4条随机线,随机位置根据自己的画布大小定
public static void drowLine(Graphics graphics){
for(int i = 1;i<=4;i++){
graphics.drawLine((int)(Math.random()*145),
(int)(Math.random()*48),(int)(Math.random()*145),
(int)(Math.random()*48));
}
}
//绘制4条随机弧线,随机位置根据自己的画布大小定
public static void drowArc(Graphics graphics){
for(int i = 1;i<=4;i++){
graphics.drawArc((int)(Math.random()*148),
(int)(Math.random()*46),(int)(Math.random()*145),
(int)(Math.random()*47),
(int)(Math.random()*190),(int)(Math.random()*190));
}
}
}
二、调用ImageUtil工具类的Servlet
代码
package com.xh.web; import com.xh.commen.ImageUtil; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.PrintWriter; @WebServlet(name = "ImgServlet",urlPatterns = {"/img","/code"}) public class ImgServlet extends HttpServlet { private String code; //做验证 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取发来的验证码 String co = request.getParameter("code"); PrintWriter out = response.getWriter(); if(co.equalsIgnoreCase(code)){ out.print(1); }else{ out.print(0); } } //向前端发送验证码图片 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取图片 BufferedImage image = ImageUtil.getImage(); //获取生成的随机字符串 code = ImageUtil.getCodeString(); //设置response的格式 response.setContentType("image/jpeg"); //向网页输出图片 ImageIO.write(image,"jpg",response.getOutputStream()); } }
三、前端HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证码</title> <script src="../lib/jquery-3.2.1.min.js"></script> <script> $(function () { var i =0; $("img").click(function () { i++; $(this).attr("src","../img?"+i); }) $("input[name='code']").blur(function () { var code = $(this).val(); $.ajax({ url:"../code", type:"post", data:{"code":code}, dataType:"text", success:function (data) { if(data == 0){ $("span").css("color","red"); $("span").html("验证码错误"); }else{ $("span").html(""); } } }) }) }) </script> </head> <body> <label>验证码:</label><input type="text" name="code"><span></span> <br> <img src="../img"><i>看不清?点击图片切换</i> </body> </html>
四、效果图