extjs ajax java简单精美验证码实现 有图
前端:利用ExtJs的autoEl功能加载图片。
var imgCheckValid = new Ext.create('Ext.Component',{
width: 70, //图片宽度
height: 45, //图片高度
margin:'5',
id:"imd_imgCheckValid",
autoEl: {
tag: 'img', //指定为img标签
src: 'Code/genCodeImg.do?' //指定url路径
},
listeners: {
render: function(component){
component.getEl().on('click', function(e){
this.dom.src = 'Code/genCodeImg.do?'+(new Date().getTime()); // autoEl不会自动加载,只有设置了不同的src才会加载
});
}
}
});
小编心得:autoEl会自动加载,要实现点击验证码刷新,登录失败刷新,方法是给请求的url加上时间戳。所以刷新验证码只要在需要刷新的时候重新设置加上时间戳的src即可。
疑问解答:为什么只是给了src一个路径,并没有给图片地址,页面能显示图片呢?
目前不是很清楚:猜想它是根据给的链接,自动从response中获得二进制资源。明确的是我会向response中写入流
后台:struts,spring配置
struts:
<!-- 客户端 -->
<package name="Code" extends="json" namespace="/Code">
<action name="genCodeImg" class="codeAction" method="genCodeImg">
<result name="success" type="json">
<param name="root">responseJson</param>
</result>
</action>
</package>
spring:
<!-- 验证码生成器--> <bean id="codeAction" class="com.sinsche.i.action.impl.CodeAction" scope="prototype"></bean>
后台:
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Map;
import java.util.Random; import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.common.core.st2.action.BaseAction;
import com.opensymphony.xwork2.ActionContext;
import com.sinsche.i.action.ICodeAction; public class CodeAction extends BaseAction implements ICodeAction {
/**
*
*/
private static final long serialVersionUID = 6865491407475710154L;
private boolean success;
private String message;
// 图片的宽度。
private int width = 70;
// 图片的高度。
private int height = 45;
// 验证码字符个数
private int codeCount = 4;
// 验证码干扰线数
private int lineCount = 20;
// 验证码图片Buffer
private BufferedImage buffImg = null;
Random random = new Random();
public String genCodeImg() throws Exception {
HttpServletResponse resp = ServletActionContext.getResponse();
int fontWidth = width / codeCount;// 字体的宽度
int fontHeight = height - 5;// 字体的高度
int codeY = height - 8; // 图像buffer
buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = buffImg.getGraphics();
// Graphics2D g = buffImg.createGraphics();
// 设置背景色
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height); // 设置字体
// Font font1 = getFont(fontHeight);
Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
g.setFont(font); // 设置干扰线
for (int i = 0; i < lineCount; i++) {
int xs = random.nextInt(width);
int ys = random.nextInt(height);
int xe = xs + random.nextInt(width);
int ye = ys + random.nextInt(height);
// g.setColor(getRandColor(1, 255));
shear(g,1,20,getRandColor(1, 255));
g.drawLine(xs, ys, xe, ye);
} // 添加噪点
float yawpRate = 0.01f;// 噪声率
int area = (int) (yawpRate * width * height);
for (int i = 0; i < area; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height); buffImg.setRGB(x, y, random.nextInt(255));
} String str1 = randomStr(codeCount);// 得到随机字符
for (int i = 0; i < codeCount; i++) {
String strRand = str1.substring(i, i + 1);
g.setColor(getRandColor(1, 255));
// g.drawString(a,x,y);
// a为要画出来的东西,x和y表示要画的东西最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处 g.drawString(strRand, i * fontWidth + 3, codeY);
} // 将四位数字的验证码保存到Session中。
Map<String, Object> map = ActionContext.getContext().getSession();
System.out.print(str1);
map.put("code", str1.toString());
// 禁止图像缓存。
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0); resp.setContentType("image/jpeg"); // 将图像输出到Servlet输出流中。
ServletOutputStream sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close(); return null;
} // 得到随机字符
private String randomStr(int n) {
String str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
String str2 = "";
int len = str1.length() - 1;
double r;
for (int i = 0; i < n; i++) {
r = (Math.random()) * len;
str2 = str2 + str1.charAt((int) r);
}
return str2;
} // 得到随机颜色
private Color getRandColor(int fc, int bc) {// 给定范围获得随机颜色
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);
} // /**
// * 产生随机字体
// */
// private Font getFont(int size) {
// Font font[] = new Font[5];
// font[0] = new Font("Ravie", Font.PLAIN, size);
// font[1] = new Font("Antique Olive Compact", Font.PLAIN, size);
// font[2] = new Font("Fixedsys", Font.PLAIN, size);
// font[3] = new Font("Wide Latin", Font.PLAIN, size);
// font[4] = new Font("Gill Sans Ultra Bold", Font.PLAIN, size);
// return font[random.nextInt(5)];
// } // 扭曲方法
private void shear(Graphics g, int w1, int h1, Color color) {
shearX(g, w1, h1, color);
shearY(g, w1, h1, color);
} private void shearX(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(2); boolean borderGap = true;
int frames = 1;
int phase = random.nextInt(2); for (int i = 0; i < h1; i++) {
double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames);
g.copyArea(0, i, w1, 1, (int) d, 0);
if (borderGap) {
g.setColor(color);
g.drawLine((int) d, i, 0, i);
g.drawLine((int) d + w1, i, w1, i);
}
} } private void shearY(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(40) + 10; // 50; boolean borderGap = true;
int frames = 20;
int phase = 7;
for (int i = 0; i < w1; i++) {
double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames);
g.copyArea(i, 0, 1, h1, 0, (int) d);
if (borderGap) {
g.setColor(color);
g.drawLine(i, (int) d, i, 0);
g.drawLine(i, (int) d + h1, i, h1);
} } } public BufferedImage getBuffImg() {
return buffImg;
}
@Override
public String list() throws Exception {
return null;
} @Override
public String create() throws Exception {
return null;
} @Override
public String update() throws Exception {
return null;
} @Override
public String delete() throws Exception {
return null;
} @Override
public String listByPage() throws Exception {
return null;
} public boolean isSuccess() {
return success;
} public void setSuccess(boolean success) {
this.success = success;
} public String getMessage() {
return message;
} public void setMessage(String message) {
this.message = message;
} }
效果:
extjs ajax java简单精美验证码实现 有图的更多相关文章
- Java简单验证码的识别
1. 需求 因为项目需要,需要多次登录某网站抓取信息.所以学习了验证码的一些小知识.文章参考http://blog.csdn.net/problc/article/details/5794460的部分 ...
- java识别简单的验证码
1.老规矩,先上图 要破解类似这样的验证码: 拆分后结果: 然后去匹配,得到结果. 2.拆分图片 拿到图片后,首先把图片中我们需要的部分截取出来. 具体的做法是,创建一个的和图片像素相同的一个代表权重 ...
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- Flask学习之旅--用 Python + Flask 制作一个简单的验证码系统
一.写在前面 现在无论大大小小的网站,基本上都会使用验证码,登录的时候要验证,下载的时候要验证,而使用的验证码也从那些简简单单的字符图形验证码“进化”成了需要进行图文识别的验证码.需要拖动滑块的滑动验 ...
- java简单词法分析器(源码下载)
java简单词法分析器 : http://files.cnblogs.com/files/hujunzheng/%E7%AE%80%E5%8D%95%E8%AF%8D%E6%B3%95%E5%88%8 ...
- 学习笔记:利用GDI+生成简单的验证码图片
学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...
- !!转!!java 简单工厂模式
举两个例子以快速明白Java中的简单工厂模式: 女娲抟土造人话说:“天地开辟,未有人民,女娲抟土为人.”女娲需要用土造出一个个的人,但在女娲造出人之前,人的概念只存在于女娲的思想里面.女娲造人,这就是 ...
- End-to-End Tracing of Ajax/Java Applications Using DTrace
End-to-End Tracing of Ajax/Java Applications Using DTrace By Amit Hurvitz, July 2007 Aja ...
- JAVA简单Swing图形界面应用演示样例
JAVA简单Swing图形界面应用演示样例 package org.rui.hello; import javax.swing.JFrame; /** * 简单的swing窗体 * @author l ...
随机推荐
- loss function与cost function
实际上,代价函数(cost function)和损失函数(loss function 亦称为 error function)是同义的.它们都是事先定义一个假设函数(hypothesis),通过训练集由 ...
- [JavaScript]JS由来
JavaScript最早由Netscape公司开发 JavaScript的发展历程 我们知道Windows桌面程序是可以交互的,用户可以点击菜单.按钮.下拉列表等控件,并通过消息机制来响应用户操作. ...
- OAF_开发系列10_实现OAF动态LOV设定
20150712 Created By BaoXinjian
- 洛谷 P3366 【模板】最小生成树 prim算法思路 我自己的实现
网上有很多prim算法 用邻接矩阵 加什么lowcost数组 我觉得不靠谱 毕竟邻接矩阵本身就不是存图的好方法 所以自己写了一个邻接表(边信息表)版本的 注意我还是用了优先队列 每次新加入一个点 ...
- php extract 函数的妙用 数组键名为声明为变量,键值赋值为变量内容
extract 函数的妙用 数组键名为声明为变量,键值赋值为变量内容 它的主要作用是将数组展开,键名作为变量名,元素值为变量值,可以说为数组的操作提供了另外一个方便的工具
- seaJs的简单应用
sea.js的应用模块化: 将Js代码按模块化分开,提高了代码的重用性:seaJs的好处: 解决了文件的依赖 解决了变量名的冲突seaJs的使用 1.定义模块 define(function(requ ...
- 每天一个 Linux 命令(18):locate 命令
locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...
- javascript事件执行流程分析
我一直想搞清楚事件在DOM中的传播方式,今天经高人指点终于明白一二.首先扒了一张图: 事件捕获过程:当我们点击TEXT时,首先是window->document->body->div ...
- Django 之 查看执行的sql语句
前提: 我的app名称为core,models.py内容如下: # coding:utf-8 from django.db import models # Create your models her ...
- [delphi]indy idhttp post方法
网易 博客 LOFTCam-用心创造滤镜 LOFTER-最美图片社交APP 送20张免费照片冲印 > 注册登录 加关注 techiepc的博客 万事如意 首页 日志 LOFTER 相册 音乐 ...