上一篇实现的是最简单的图片验证,本文要实现复杂一点的:图片是旋转的,并通过一个注册实例把图片验证嵌套在网页中
实现图片旋转功能的代码为:
- //写字母
- String content = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcedfghijklmnopqrstuvwxyz1234567890";
- Random random = new Random();
- Graphics2D graphics2D = (Graphics2D)graphics;
- //设置字体颜色
- graphics2D.setColor(Color.red);
- //设置字体及大小
- graphics2D.setFont(new Font("宋体", Font.BOLD, 20));
- int x=20;
- int y=20;
- for(int i = 0; i < 4; i++)
- {
- int index = random.nextInt(content.length());
- char letter = content.charAt(index);
- double jiaodu = random.nextInt(60)-30;
- double theta = jiaodu/360*2*Math.PI;
- graphics2D.rotate(theta, x, y);
- graphics2D.drawString(letter+" ", x, y);
- graphics2D.rotate(-theta, x, y);
- x = x+20;
- }
实现带旋转图片验证功能的servlet代码为:
- package com.lsgjzhuwei.servlet.response;
- import java.awt.Color;
- import java.awt.Font;
- import java.awt.Graphics;
- import java.awt.Graphics2D;
- import java.awt.image.BufferedImage;
- import java.io.IOException;
- import java.util.Random;
- 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;
- /**
- * Servlet implementation class VerificationCode
- */
- @WebServlet(asyncSupported = true, urlPatterns = { "/VerificationCode" })
- public class VerificationCode extends HttpServlet {
- private static final long serialVersionUID = 1L;
- /**
- * @see HttpServlet#HttpServlet()
- */
- public VerificationCode() {
- super();
- // TODO Auto-generated constructor stub
- }
- /**
- * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
- */
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- // TODO Auto-generated method stub
- int width = 120;
- int height = 30;
- //创建一张内存中的缓存图片
- BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
- ///背景色
- //通过graphics绘制图像
- Graphics graphics = bufferedImage.getGraphics();
- //设置颜色
- graphics.setColor(Color.yellow);
- //填充
- graphics.fillRect(0, 0, width, height);
- ///画边框
- graphics.setColor(Color.blue);
- graphics.drawRect(0, 0, width-1, height-1);
- //写字母
- String content = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcedfghijklmnopqrstuvwxyz1234567890";
- Random random = new Random();
- Graphics2D graphics2D = (Graphics2D)graphics;
- //设置字体颜色
- graphics2D.setColor(Color.red);
- //设置字体及大小
- graphics2D.setFont(new Font("宋体", Font.BOLD, 20));
- int x=20;
- int y=20;
- for(int i = 0; i < 4; i++)
- {
- int index = random.nextInt(content.length());
- char letter = content.charAt(index);
- double jiaodu = random.nextInt(60)-30;
- double theta = jiaodu/360*2*Math.PI;
- graphics2D.rotate(theta, x, y);
- graphics2D.drawString(letter+" ", x, y);
- graphics2D.rotate(-theta, x, y);
- x = x+20;
- }
- //绘制干扰线
- int x1;
- int x2;
- int y1;
- int y2;
- graphics.setColor(Color.LIGHT_GRAY);
- for(int i = 0;i <50;i++)
- {
- x1=random.nextInt(width);
- x2=random.nextInt(width);
- y1=random.nextInt(height);
- y2=random.nextInt(height);
- graphics.drawLine(x1, y1, x2, y2);
- }
- //将图片输出到浏览器
- //将内存的图片通过浏览器输出流输出成jpg图片
- ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
- }
- /**
- * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
- */
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- // TODO Auto-generated method stub
- }
- }
下面是新建HTML页面,并添加简单的注册按钮,源码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Insert title here</title>
- </head>
- <body>
- <form>
- 输入用户名<input type="text"/><br/>
- 请输入密码<input type="password"/><br/>
- 请输入验证码<input type="text" name ="checkcode">
- <img src="/day06/VerificationCode"/> <br/>
- <input type="submit" value="注册"/>
- </form>
- </body>
- </html>
系统运行界面如下:
下面实现复杂点的功能:单击图片验证码的时候验证码刷新
修改HTML页面代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript">
- function change()
- {
- //alert("1");
- //重新加载生成图片
- document.getElementById("myimg").src="/day06/VerificationCode?"+new Date().getTime();
- //alert(document.getElementById("myimg").src);
- }
- </script>
- <title>Insert title here</title>
- </head>
- <body>
- <form>
- 输入用户名<input type="text"/><br/>
- 请输入密码<input type="password"/><br/>
- 请输入验证码<input type="text" name ="checkcode">
- <img src="/day06/VerificationCode" onclick="change()" id="myimg" style="cursor:pointer"/> <br/>
- <input type="submit" value="注册"/>
- </form>
- </body>
- </html>