1.实现产生图片验证码的action
2.配置action,将上述action返回的逻辑结果设置为文件流类型
3.写一个测试的html页面,使其请求上面的action,得到返回的图片结果。
4.运行结果,点击图片可以改变验证码。
1.实现产生图片验证码的action
private ByteArrayInputStream inputStream;
public String execute() throws Exception{
RandomNumUtil rdnu=RandomNumUtil.Instance();
this.setInputStream(rdnu.getImage());//取得带有随机字符串的图片
ActionContext.getContext().getSession().put("random", rdnu.getString());//取得随机字符串放入HttpSession
return SUCCESS;
}
public void setInputStream(ByteArrayInputStream inputStream) {
this.inputStream = inputStream;
}
public ByteArrayInputStream getInputStream() {
return inputStream;
}
}
public class RandomNumUtil {
private ByteArrayInputStream image;//图像
private String str;//验证码
private RandomNumUtil(){
init();//初始化属性
}
/*
* 取得RandomNumUtil实例
*/
public static RandomNumUtil Instance(){
return new RandomNumUtil();
}
/*
* 取得验证码图片
*/
public ByteArrayInputStream getImage(){
return this.image;
}
/*
* 取得图片的验证码
*/
public String getString(){
return this.str;
}
private void init() {
// 在内存中创建图象
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获取图形上下文
Graphics g = image.getGraphics();
// 生成随机类
Random random = new Random();
// 设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);
// 设定字体
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
//取随机产生的认证码(4位)
String sRand="";
// for (int i=0;i<6;i++){
// String rand=String.valueOf(random.nextInt(10));
// sRand+=rand;
char selectChar[] = {'0','1','2','3','4','5','6','7','8','9',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'};//所有候选组成验证码的字符,当然也可以用中文的
for (int i=0;i<6;i++){
// String rand=String.valueOf(random.nextInt(10));
// sRand+=rand;
int charIndex = (int) Math.floor(Math.random()*62); //62个字符
String rand = String.valueOf(selectChar[charIndex]);
sRand +=selectChar[charIndex];
// 将认证码显示到图象中
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
// 调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成
g.drawString(rand,13*i+6,16);
this.str=sRand;/* 赋值验证码 */
}
//图象生效
g.dispose();
ByteArrayInputStream input=null;
ByteArrayOutputStream output = new ByteArrayOutputStream();
try{
ImageOutputStream imageOut = ImageIO.createImageOutputStream(output);
ImageIO.write(image, "JPEG", imageOut);
imageOut.close();
input = new ByteArrayInputStream(output.toByteArray());
}catch(Exception e){
System.out.println("验证码图片产生出现错误:"+e.toString());
}
this.image=input;/* 赋值图像 */
}
/*
* 给定范围获得随机颜色
*/
private Color getRandColor(int fc,int bc){
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r=fc+random.nextInt(bc-fc);
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
}
2.配置action,将上述action返回的逻辑结果设置为文件流类型
struct.xml 代码
<action name="rand" class="com.ection.utiltool.VerifyCode">
<result type="stream">
<param name="contentType">image/jpeg</param>
<param name="inputName">inputStream</param>
</result>
</action>
<action name="login*" class="com.hm.information.Action.LoginAction" method="{1}">
<result name="success">/table.jsp</result>
</action>
3.写一个测试的html页面,使其请求上面的action,得到返回的图片结果。
function changeValidateCode(obj) {
//获取当前的时间作为参数,无具体意义
var timenow = new Date().getTime();
//每次请求需要一个不同的参数,否则可能会返回同样的验证码
//这和浏览器的缓存机制有关系,也可以把页面设置为不缓存,这样就不用这个参数了。
obj.src="/financial/rand.action?d="+timenow; //d= d是任意起的名字 financial是命名空间,在struts.xml namespace="financial"中
}
</script>
验证码:<input type="text" name="yzm"/> <img src="/financial/rand.action" onclick="changeValidateCode(this)"/> <br/>
<input type="button" name="submit" value="提交" onclick="go()"/>
<script type="text/javascript">
function go() {
alert("go");
/* window.location.href="./table.jsp"; */
var yzm = $("input[name='yzm']").val();
var url = "/financial/logincheck.action";
jqueryGetJSONData(url,{yzm:yzm,rnd : Math.random()},
function(data){
alert("ajax回调函数执行");
});
}
</script>
//只是简单的描述,提交了比较输入的验证码和图片中给定的验证码是否一样,没有具体写成功之后的回调函数,
4.客户端的验证代码。