[JSP] jsp页面的动态图片验证码,供大家参考.

今天给大家一个JSP页面的动态验证码的示例,供大家参考,好了,开始进入正题.

首先,先写一个动态图片生成的Servlet类,如下:

package org.yuanliang;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class RandomCode extends HttpServlet {
 private static final long serialVersionUID = 1L;

 private static int WIDTH = 65;//设置图片的宽度

 private static int HEIGHT = 22;//设置图片的高度

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  HttpSession session = request.getSession();
  response.setContentType("image/jpeg");
  ServletOutputStream sos = response.getOutputStream();

  response.setHeader("Pragma", "No-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);

  BufferedImage image = new BufferedImage(WIDTH, HEIGHT,
    BufferedImage.TYPE_INT_RGB);
  Graphics g = image.getGraphics();

  char[] rands = generateCheckCode();
  drawBackground(g);
  drawRands(g, rands);
  g.dispose();

  ByteArrayOutputStream bos = new ByteArrayOutputStream();
  ImageIO.write(image, "JPEG", bos);
  byte[] buf = bos.toByteArray();
  response.setContentLength(buf.length);
  sos.write(buf);
  bos.close();
  sos.close();
  session.setAttribute("randomCode", new String(rands));
 }

 private void drawBackground(Graphics g) {
  g.setColor(new Color(0xDCDCDC));
  g.fillRect(0, 0, WIDTH, HEIGHT);
  for (int i = 0; i < 120; i++) {
   int x = (int) (Math.random() * WIDTH);
   int y = (int) (Math.random() * HEIGHT);
   int red = (int) (Math.random() * 255);
   int green = (int) (Math.random() * 255);
   int blue = (int) (Math.random() * 255);
   g.setColor(new Color(red, green, blue));
   g.drawOval(x, y, 1, 0);
  }
 }

 private void drawRands(Graphics g, char[] rands) {
  // g.setColor(Color.BLUE);
  Random random = new Random();
  int red = random.nextInt(110);
  int green = random.nextInt(50);
  int blue = random.nextInt(50);
  g.setColor(new Color(red, green, blue));
  g.setFont(new Font(null, Font.ITALIC | Font.BOLD, 18));
  g.drawString("" + rands[0], 1, 17);
  g.drawString("" + rands[1], 16, 15);
  g.drawString("" + rands[2], 31, 18);
  g.drawString("" + rands[3], 46, 16);
 }

 private char[] generateCheckCode() {
  String chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  char[] rands = new char[4];
  for (int i = 0; i < 4; i++) {
   int rand = (int) (Math.random() * 36);
   rands[i] = chars.charAt(rand);
  }
  return rands;
 }

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  this.doGet(request, response);
 }
}

OK!!!保存为RandomCode.java吧,然后进行编译,生成RandomCode.class文件,放到WEB-INF/classes/org/yuanliang目录下;

然后在WEB-INF目录下建立web.xml,添加Servlet配置:

- <servlet>
  <servlet-name>RandomCodeServlet</servlet-name>
  <servlet-class>org.yuanliang.RandomCode</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>RandomCodeServlet</servlet-name>
  <url-pattern>/imgcode</url-pattern>
 </servlet-mapping>

最后,在JSP页面中加入动态生成的图片验证码.

如: <img src="imgcode"/>

这时新的问题来了,如果用户看不清楚这个图片怎么为呢?

对了,就是加入刷新功能.

说两种简单的方法吧:

1.直接点击图片更换验证码:

可用JS脚本,添加如下代码到JSP页面中:

<script type="text/javascript">
        function changeCode()
  {
   document.getElementById("rc").src="imgcode";
  }

 </script>

更改验证图片导入的代码:

<img src="imgcode" id="rc" οnclick="changeCode()" title="看不清？单击换一张图片" />

2.添加文字链接,使其更换:

<a href="javascript:changeCode();">看不清？单击换一张图片</a>

OK!!!开始运行你的JSP页面吧,看有了没??

如有问题存在,欢迎提出宝贵的意见!

QQ:444825