验证码技术

来源:互联网 发布:js倒计时功能 编辑:程序博客网 时间:2024/06/05 09:55

大概内容:
1.验证码的原型技术
2.验证码的应用

验证码的原型技术

其实原理挺简单的:就是在画布上把验证码画出来,然后发送到前端
下面演示一下在画布上画数字或者字符的方式:

import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.FileOutputStream;import java.util.Random;import javax.imageio.ImageIO;import org.junit.Test;public class ImageDemo {    @Test    public void demo1() throws Exception{        //设置宽高        int w=60;        int h=30;        //声明一个RGB图片对象        BufferedImage img=new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);        Graphics g=img.getGraphics();        g.drawString("Hello",0,30);        g.dispose();        //把内存图片img保存到指定的jpg文件中        ImageIO.write(img,"jpeg",new FileOutputStream("d:/a/p1.jpg"));    }    @Test    public void demo2() throws Exception{        //定义图片的宽高        int w=60;        int h=30;        //声明一个RGB图片对象        BufferedImage img=new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);        Graphics g=img.getGraphics();        //设置白色背景        g.fillRect(0,0,w,h);        g.setColor(Color.white);        //设置字体        g.setFont(new Font("t",Font.ITALIC,16));        //产生4个10以内的随机数并在图片上画出来        Random r=new Random();        for(int i=0;i<4;i++){            int s=r.nextInt(10);//产生随机整数            int y=15+r.nextInt(10);//产生随机的垂直高度            //产生随机颜色            Color c=new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256));            g.setColor(c);            g.drawString(""+s,i*15,y);        }        //干扰线        for(int i=0;i<6;i++){            //产生随机颜色            Color c=new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256));            g.setColor(c);            g.drawLine(r.nextInt(60),r.nextInt(30),r.nextInt(60),r.nextInt(30));        }        //刷新        g.dispose();        ImageIO.write(img,"jpeg",new FileOutputStream("d:/a/p2.jpg"));    }}

验证码的应用

通过验证码验证用户登录演示一下:
1.先写一个servlet

import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServlet;@SuppressWarnings("serial")public class CodeImageServlet extends HttpServlet{    @Override    public void service(ServletRequest req, ServletResponse resp)            throws ServletException, IOException {        //提示浏览器现在发送的文件的数据格式,以便浏览器用相应方式解析        resp.setContentType("image/jpeg");        //定义图片的宽高        int w=60;        int h=30;        //声明一个RGB图片对象        BufferedImage img=new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);        Graphics g=img.getGraphics();        //设置白色背景        g.fillRect(0,0,w,h);        g.setColor(Color.white);        //设置字体        g.setFont(new Font("t",Font.ITALIC,16));        //产生4个10以内的随机数并在图片上画出来        Random r=new Random();        for(int i=0;i<4;i++){            int s=r.nextInt(10);//产生随机整数            int y=15+r.nextInt(10);//产生随机的垂直高度            //产生随机颜色            Color c=new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256));            g.setColor(c);            g.drawString(""+s,i*15,y);        }        //干扰线        for(int i=0;i<6;i++){            //产生随机颜色            Color c=new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256));            g.setColor(c);            g.drawLine(r.nextInt(60),r.nextInt(30),r.nextInt(60),r.nextInt(30));        }        //刷新        g.dispose();        //直接写到浏览器        ImageIO.write(img,"jpeg",resp.getOutputStream());    }}

2.写Jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>验证码练习</title>    <!-- 下面这一堆在这里没什么用 -->    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!-- 验证码的切换 -->    <script type="text/javascript">        function changeImg(){            var img=document.getElementById("codeImg");            img.src="code?"+new Date().getTime();        }    </script>  </head>  <body>    <h3>验证码练习</h3>    <form>        姓名: <input type="text" name="userName"/><br/>        密码: <input type="password" name="passWord"/>             <img id="codeImg" src="code"/>             <a href="javascript:changeImg();">看不清</a>    </form>  </body></html>

网页展示:
这里写图片描述

原创粉丝点击