实现网页中验证码的切换功能

制作一个验证码的切换功能。(具体过程)

1.首先,在包下new一个servlet,比如:VertifyCodeServlet

2.给urlPatterns一个名字,如:"/code"

3.在doGet()中先需要一张图片。

这个图片可以通过BufferedImage来定义:BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB)

而width要事先定义好,int width=100;int heigh30;

4.这张图片上的默认颜色是黑色的,故需要更改颜色。这里用到Graphics

Graphics graphics=image.getGraphics();

graphics.setColor(Color.gray),而后填充上面的矩形。graphics.fillRect(x:0,y:0,width,height)

5在图片中输出随机的字符。

往图片中写字符用graphics.drawString(str,x,y);

而要随机生成,事先要先设置一个字符集

String data="asdfg1233";

Random random=new Random();

在随机得到字符串的位置:int position=random.netInt(data.length());

拿到字符:data.subString(position,position+1).

这里subString(beginIndex,endIndex)方法是拿到一个字符串的子字符串,长度为endIndex-beginIndex.

这样再结合需要四个这样的字符,就有:

for(int i=0;i<4;i++)

{

int posttion=random.nextINT(data.length());

String randomstr=data.subString(position,position+1)

graphics.drawString(randomstr,x:width/5*(i+1),y:15)

}

而后要将这幅图片写入浏览器中,用ImageIO,他可以将其转化成outputstream类型。

ImageIO.write(image,formatName:"jpg",response.getoutputStream)

附上代码:

vertifyCode.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>切换验证码</h2>
<script>
    function changeImageCode() {
        document.getElementById("btn").isDisabled=true;
        document.getElementById("identify").src="code?ts="+new Date().getTime();
       // document.getElementById("identify").src="code";
        
    }
</script>
<img src="code" id="identify" onload="btn.disabled=false" style="cursor: pointer; vertical-align: auto">
<input type="button" value="看不清,切换代码" id="btn" onclick="changeImageCode()" style="vertical-align: auto">
</body>
</html>

VertifyCodeServlet

package net.zixue.servlet;

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.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet(name = "VertifyCodeServlet",urlPatterns = "/code")
public class VertifyCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        int width=100;
        int height=30;
        String data="abcdefg1234560";
        Random random=new Random();
        BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
        Graphics graphics = image.getGraphics();
        graphics.setColor(Color.gray);
        graphics.fillRect(0,0,width,height);
        graphics.setColor(Color.black);
        for (int i=0;i<4;i++)
        {
            int position = random.nextInt(data.length());
            String randomstr = data.substring(position, position + 1);
            graphics.drawString(randomstr,width/5*(i+1),15);

        }



        ImageIO.write(image,"jpg",response.getOutputStream());
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_41060905/article/details/81382949