后端代码：
package priv.lwx.servlet.sl.web;/*** description** @author liaowenxiong* @date /3/25 09:56*/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.io.OutputStream;import java.util.Random;@WebServlet("/PlainCheckCodeServlet")public class PlainCheckCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("image/png");// 在内存中构造一个图像对象BufferedImage image = new BufferedImage(45, 20, BufferedImage.TYPE_INT_RGB);// 创建随机数对象Random r = new Random();// 获得画笔，并且转换成2D画笔Graphics2D，因为Graphics2D可以去锯齿，Graphics2D是Graphics的子类Graphics2D g = (Graphics2D)image.getGraphics();// 随机设置画笔的颜色// g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));g.setColor(Color.BLUE);// 填充矩形，其实就是填充背景色g.fillRect(0, 0, 60, 20);// 设置画笔的颜色g.setColor(new Color(0, 0, 0));// 设置字体、样式、大小Font font = new Font("宋体", 0, 10);g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); // 抗锯齿g.setFont(font);// 随机获取0~99998之间的数值String number = String.valueOf(r.nextInt(99999));// 把获取到的数值绘入图片对象中g.drawString(number, 5, 15);// 获得字节输出流，因为要输出的是图像压缩之后的字节数组，所以，不能用 PrintWriter。OutputStream os = response.getOutputStream();// 获取图片压缩编码器// JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);// 这是Sun公司私有的API// encoder.encode(image);ImageIO.write(image, "png", os);}}
前端代码：
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><html><head><title>注册</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="css/style.css"/><script>window.onload = function () {var image = document.getElementById("checkCode");var rb = document.getElementById("rb");image.onclick = function () {image.src = "plain_check_code?" + Math.random();};rb.onclick = function () {image.src = "plain_check_code?" + Math.random();}};</script></head><body><div id="wrap"><div id="top_content"><div id="header"><div id="rightheader"><p>/11/20<br/></p></div><div id="topheader"><h1 id="title"><a href="#">main</a></h1></div><div id="navigation"></div></div><div id="content"><p id="whereami"></p><h1>注册</h1><form action="register.do" method="post"><table cellpadding="0" cellspacing="0" border="0"class="form_table"><tr><td valign="middle" align="right">用户名:</td><td valign="middle" align="left"><input type="text" class="inputgri" name="accountName"/><%String msg = (String) request.getAttribute("registerErrorMessage");%><span style="color: red;font-style: italic"><%=(msg == null ? "" : msg)%></span></td></tr><tr><td valign="middle" align="right">真实姓名:</td><td valign="middle" align="left"><input type="text" class="inputgri" name="realName"/></td></tr><tr><td valign="middle" align="right">密码:</td><td valign="middle" align="left"><input type="password" class="inputgri" name="password"/></td></tr><tr><td valign="middle" align="right">性别:</td><td valign="middle" align="left">男<input type="radio" class="inputgri" name="gender" value="m" checked="checked"/>女<input type="radio" class="inputgri" name="gender" value="f"/></td></tr><tr><td valign="middle" align="right">验证码:</td><td valign="middle" align="left"><input type="text" class="inputgri" name="checkCode"/><img style="vertical-align: middle;height: 32px" id="checkCode" src="plain_check_code"/><a href="javascript:" id="rb">换一张</a></td></tr></table><p><input type="submit" class="button" value="注册 »"/></p></form></div></div><div id="footer"><div id="footer_bg">ABC@</div></div></div></body></html>
