前端验证码后端返回一个图片_Web后端开发(6)——简易图片验证码的制作

大家在登录或注册某些网站的时候经常会看到一些随机的图片验证码，那么这些验证码到底是怎么制作的呢？下面我们就从最简单的制作方法中学一下验证码的制作过程。

创建图片对象

要制作图片验证码，首先要创建一个图片对象，用来存储我们要制作的验证码。

①声明参数变量

图片对象需要长、宽和颜色类型三个参数，我们先声明一下：

int width = 100;int height = 50;int typeImage = BufferedImage.TYPE_INT_RGB;

②创建图像对象

BufferedImage image = new BufferedImage(width,height,typeImage);

此时得到一张全黑(即RGB全为0)的默认图片。

美化图片

①设置背景颜色

首先声明一个画笔对象：

Graphics g = image.getGraphics();

然后设置画笔的颜色：

g.setColor(Color.PINK);

最后从(0,0)点到(wigth,height)点填充一个矩形，即设置背景颜色：

g.fillRect(0,0,width,height);

②画图片边框

因为前面已经声明了画笔对象，所以这里直接用就可以，还是设置画笔颜色：

g.setColor(Color.BLUE);

然后画边框，以为边框默认宽度为1，所以我们在设置参数时需要-1：

g.drawRect(0,0,width - 1,height - 1);

③随机生成验证码

先声明一个包含所有想要使用字符的字符串：

String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

声明一个随机数变量，以便获取随机角标：

Random ran = new Random();

获取随机角标：

int index = ran.nextInt(str.length());

获取随机字符

char ch = str.charAt(index);

把随机字符写入图片

g.drawString(ch,20,25);

④画干扰线

随机生成两个坐标点：

int x1 = ran.nextInt(width);int x2 = ran.nextInt(width);int y1 = ran.nextInt(height);int y2 = ran.nextInt(height);

然后用画笔在两个点之间画一条线：

g.drawLine(x1,y1,x2,y2);

把图片发送到页面上

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

直接使用response对象的字节输出流输出即可。

完整代码如下所示：

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("/checkCodeServlet")public class CheckCodeServlet extends HttpServlet {    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1.创建图片对象        int width = 100;        int height = 50;        int typeImage = BufferedImage.TYPE_INT_RGB;        BufferedImage image = new BufferedImage(width,height,typeImage);        //2.美化图片        //2.1 填充背景色        Graphics g = image.getGraphics();//画笔对象        g.setColor(Color.PINK);//设置画笔颜色        g.fillRect(0,0,width,height);        //2.2画边框        g.setColor(Color.BLUE);        g.drawRect(0,0,width - 1,height - 1);        //生成随机角标        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";        Random ran = new Random();        for (int i = 1; i <= 4; i++) {            int index = ran.nextInt(str.length());            //获取字符            char ch = str.charAt(index);            //2.3写验证码            g.drawString(ch+"",width/5*i,height/2);        }        //2.4画干扰线        g.setColor(Color.GREEN);        //随机生成坐标点        for (int i = 0; i < 10; i++) {            int x1 = ran.nextInt(width);            int x2 = ran.nextInt(width);            int y1 = ran.nextInt(height);            int y2 = ran.nextInt(height);            g.drawLine(x1,y1,x2,y2);        }        //3.将图片输出到页面展示        ImageIO.write(image,"jpg",response.getOutputStream());    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doPost(request,response);    }}

在网页上的效果如图所示：