在JSP页面和HTML页面中验证码的玩法

我们在做项目的时候，往往会在页面中用到验证码，这里整理下在JSP页面和HTML页面中验证码的玩法：

jsp页面的话，可以单独写一个image.jsp将生成验证码的代码写在里面，然后在需要用到验证码的页面上用

<img src="${pageContext.request.contextPath }/static/system/jsp/common/image.jsp"/>

进行引用即可

image.jsp中的代码：

<%@ page contentType="image/jpeg"
	import="java.awt.*,
java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="utf-8"%>
<%!
Color getRandColor(int fc,int bc)
{
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r=fc+random.nextInt(bc-fc);
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
%>
<%
out.clear();
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random random = new Random();
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
String sRand="";
for (int i=0;i<4;i++){
String rand=String.valueOf(random.nextInt(10));
sRand+=rand;
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
g.drawString(rand,13*i+6,16);
}
// 将验证码存入SESSION
session.setAttribute("sRand",sRand);
g.dispose();
ImageIO.write(image, "JPEG", response.getOutputStream());
%>

引用：

运行效果：

在HTML页面中就不能这样玩了，因为不能在HTML页面中引用jsp页面，所以要将生成验证码的代码写到一个controller中去（我这里用的是springboot框架），然后在需要用到验证码的页面调用那个地址即可：

<img th:src="@{/admin/user/image}" id="image"/>

注意不能用ajax先拿到图片再把它赋给src，我一开始就是这样：

   $(function () {
        $.ajax({
            url : ctx + "admin/user/image",
            type : "post",
            success : function (data) {
                $("#image").src = data;
            }
        });
    })

然后发现图片不能显示，因为图片是二进制的东西，而src需要一个地址即可，所以我一开始想复杂了。

controller中的代码：

    @ResponseBody
    @RequestMapping("/user/image")
    public void image(HttpServletRequest req,HttpServletResponse resp) throws Exception {
        int width=100;//宽
        int height=30;//高
        //定义随机数组
        String[] data={"0","1","2","3","4","5","6","7","8","9"};
        //随机数
        Random myr=new Random();

        //1.画图片
        //1.1画布(图片本身)
        BufferedImage bi=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        //1.2画笔
        Graphics g=bi.getGraphics();
        //1.2.1设置画笔的颜色
        g.setColor(Color.PINK);//颜色自己定
        //1.3用画笔来填充矩形（x,y,width,height）
        g.fillRect(0, 0, width, height);

        String str="";
        //2.随机数
        for (int i = 0; i < 4; i++) {
            //随机data[]中的下标
            int index=myr.nextInt(data.length);
            str+=data[index]+"  ";
        }

        //将验证码str保存到session中 在loginServlet中进行判断！！！
        req.getSession().setAttribute("sRand",str);
        //3.将随机数放到图片上
        //3.1再次设置画笔的颜色(用来画随机数)
        g.setColor(Color.BLUE);//颜色自己定
        //3.2设置字体
        g.setFont(new Font("微软雅黑", Font.BOLD, 15));//字体属性自己定
        //3.3开始画（画谁，x,y）
        g.drawString(str, 14, 20);

        //画干扰线（点）
        g.setColor(Color.RED);//设置画笔颜色
        //干扰点
        for (int i = 0; i < 200; i++) {
            int x=myr.nextInt(100);
            int y=myr.nextInt(30);
            g.drawLine(x, y, x, y);
        }

        //干扰线
        for (int i = 0; i < 5; i++) {
            int x=myr.nextInt(100);
            int y=myr.nextInt(30);
            int x1=myr.nextInt(100);
            int y1=myr.nextInt(30);
            g.drawLine(x, y, x1, y1);
        }

        //4.将生成的图片放到页面 输出流对象
        ServletOutputStream sos=resp.getOutputStream();
        //建议使用gif格式输出
        ImageIO.write(bi, "gif", sos);
    }

运行一波的效果：

以上就是在JSP页面和HTML页面中使用验证码的两种玩法。