生成前端图片验证码

最新推荐文章于 2024-08-13 14:11:22 发布

dasheng7189

最新推荐文章于 2024-08-13 14:11:22 发布

阅读量256

点赞数

文章标签：前端 java javascript ViewUI

原文链接：http://www.cnblogs.com/xpcoldplay/p/10290703.html

版权

效果图：

1、创建生成验证码图片的java类

 1 package com.job.web.action.commons;
 2 import java.awt.Color;  
 3 import java.awt.Font;  
 4 import java.awt.Graphics;  
 5 import java.awt.image.BufferedImage;  
 6 import java.io.IOException;  
 7 import java.io.OutputStream;  
 8 import java.util.Random;  
 9   
10 import javax.imageio.ImageIO;  
11 
12 /**
13  * 生成验证码图片向前台返回
14  * @author Administrator
15  *
16  */
17 public class MakeCertPic {  
18   
19     //验证码图片中可以出现的字符集  
20     private char mapTable[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',  
21             'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',  
22             'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8',  
23             '9' };  
24       
25     /** 
26      * 生产彩色验证码图片 
27      * @param   width 生产图片宽度 
28      * @param   height 生产图片高度 
29      * @param   os 页面输出流 
30      * @return  随机生产的验证码 
31      */  
32     public String getCertPic(int width,int height,OutputStream os){  
33         //设定高度宽度默认值  
34         if(width <= 0){  
35             width = 80;  
36         }  
37         if(height <= 0){  
38             height = 40;  
39         }  
40         //创建一个特定样式的BufferedImage  
41         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);  
42         //获取图形上下文  
43         Graphics g = image.getGraphics();  
44         //设定背景色  
45         g.setColor(new Color(0xDCDCDC));  
46         g.fillRect(0, 0, width, height);  
47         //画边框  
48         g.setColor(Color.getColor("#dddddd"));  
49         g.drawRect(0, 0, width-1, height-1);  
50         //取随机产生的认证码  
51         String strEnsure = "";  
52         //4代表4位验证码，如果要生产更多位的认证码，则加大数值  
53         for(int i = 0; i < 4; i++){  
54             strEnsure += mapTable[(int) (mapTable.length * Math.random())];  
55         }  
56         //将验证码显示到图像中，如果要生产更多位的验证码，增加drawString语句  
57         g.setColor(Color.BLUE);  
58         g.setFont(new Font("Atlantic Inline", Font.PLAIN, 20));  
59         String str = strEnsure.substring(0, 1);  
60         g.drawString(str, 8, 17);  
61         str = strEnsure.substring(1, 2);  
62         g.drawString(str, 20, 15);  
63         str = strEnsure.substring(2, 3);  
64         g.drawString(str, 35, 18);  
65         str = strEnsure.substring(3, 4);  
66         g.drawString(str, 45, 15);  
67         //随机产生10个干扰点,产生多个修改数量10  
68         Random rand = new Random();  
69         for (int i = 0; i < 10; i++) {  
70             int x = rand.nextInt(width);  
71             int y = rand.nextInt(height);  
72             g.drawOval(x, y, 1, 1);  
73         }  
74         //释放图形上下文  
75         g.dispose();  
76         try {  
77             ImageIO.write(image, "JPEG", os);  
78         } catch (IOException e) {  
79             return "";  
80         }  
81         return strEnsure;  
82     }  
83 }

2、创建获取后台生成的图片jsp,把验证码字符存入session

 1 <%@ page language="java" pageEncoding="UTF-8"%>  
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 3 <html>  
 4     <head>  
 5     <%@ page contentType="image/jpeg" %>  
 6     </head>  
 7     <body>  
 8     <jsp:useBean id="image" scope="page" class="com.job.web.action.commons.MakeCertPic"></jsp:useBean>  
 9     <%  
10         String str = image.getCertPic(0,0,response.getOutputStream());  
11         // 将认证码存入session  
12         session.setAttribute("picCode", str);  
13           
14         out.clear();  
15         out = pageContext.pushBody();  
16     %>  
17     </body>  
18 </html>

3、页面调用

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <%@ taglib prefix="s" uri="/struts-tags" %>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 <title>测试图片验证码</title> 
 8 <script type="text/javascript" src="/touch/static/js/jquery-2.2.4.min.js"></script>  
 9 </head> 
10 <body>
11 <script type="text/javascript">
12 $(function(){
13     changePic();
14 });
15 function changePic(){
16     var verify = document.getElementById("pitureCode");  
17     verify.setAttribute('src','/commons/mobileMakeCertPic.jsp?it='+Math.random()); 
18 }
19  
20 </script>
21  <body>
22  
23  <img src="" id="pitureCode"  onclick="changePic();"/>
24 </body>
25 </html>