选字验证码
本⽰例为选择⼀个字，点击图⽚上的字到后台进⾏验证：
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import AffineTransform;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Random;
/**
* Created by Saindy on 2017/7/3.
*/
public class ImgCheckController extends BaseController {
public void gotoDemo() {
render("imgCheckDemo.jsp");
}
private static Random random = new Random();
public void getImg() {
/
/        HttpServletRequest request = getRequest();
HttpServletResponse response = getResponse();
HttpSession session = getSession();
int fontSize = 30;
int height = 490;  //图⽚⾼
int width = 650;  //图⽚宽
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g = (Graphics2D) Graphics();
// 读取本地图⽚，做背景图⽚
String picPath = "d:/opt/img/" + (Int(4) + 1) + ".png";
System.out.println(picPath);
try {
g.ad(new File(picPath)), 0, fontSize, width, height, null); //将背景图⽚从⾼度30开始        } catch (IOException e) {
e.printStackTrace();
}
g.setColor(Color.WHITE);  //设置颜⾊
g.drawRect(0, 0, width - 1, height - 1); //画边框
g.setFont(new Font("宋体", Font.BOLD, fontSize)); //设置字体
Integer x = null, y = null;  //⽤于记录坐标
String target = null; // ⽤于记录⽂字
for (int i = 0; i < 4; i++) {  //随机产⽣4个⽂字，坐标，颜⾊都不同
g.setColor(getRandColor(100, 160));
String str = getRandomChineseChar();
int a = Int(width - 100) + 50;
int b = Int(height - 100) + 55;
if (x == null) {
x = a; //记录第⼀个x坐标
}
if (y == null) {
y = b;//记录第⼀个y坐标
}
if (target == null) {
target = str; //记录第⼀个⽂字
}
AffineTransform affine = new AffineTransform();
System.out.println("第:" + i + "个");
g.drawString(str, a, b);
System.out.println("⽣成的⽂字[" + str + "], 坐标：x=" + a + ", y=" + b);
}
g.setColor(Color.white);
g.drawString("请点击" + target, 0, fontSize);//写⼊验证码第⼀⾏⽂字  “请点击..”        session.setAttribute("gap", x + ":" + y);//将坐标放⼊session
//5.释放资源
g.dispose();
//6.利⽤ImageIO进⾏输出
try {
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
ImageIO.write(image, "PNG", OutputStream()); //将图⽚输出        } catch (IOException e) {
e.printStackTrace();
}
}
/**
* 随机产⽣颜⾊
*/
private static Color getRandColor(int fc, int bc) {
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + Int(bc - fc);
int g = fc + Int(bc - fc);
int b = fc + Int(bc - fc);
return new Color(r, g, b);
}
/
**
* 随机产⽣汉字
*/
public String getRandomChineseChar() {
String str = null;
int heightPos, lowPos; // 定义⾼低位
Random random = new Random();
heightPos = (176 + Math.Int(39))); //获取⾼位值
lowPos = (161 + Math.Int(93))); //获取低位值
byte[] b = new byte[2];
b[0] = (new Integer(heightPos).byteValue());
b[1] = (new Integer(lowPos).byteValue());
try {
str = new String(b, "GBk"); //转成中⽂
} catch (UnsupportedEncodingException ex) {
ex.printStackTrace();
}
return str;
}
public void checkImg() {
HttpSession session = getSession();
String mX = getPara("x");
String mY = getPara("y");
String str = (String) Attribute("gap");//获取session中的gap
String[] split2 = str.split(":");
int x = Integer.parseInt(mX);
int y = Integer.parseInt(mY);
int x1 = Integer.parseInt(split2[0]);
int y1 = Integer.parseInt(split2[1]);
if (x1 - 22 < x && x < x1 + 22 && y1 - 22 < y && y < y1 + 22) {  //若前端上传的坐标在session中记录的坐标的⼀定范围内则验证成功            renderJson(HttpResultEntry.ok("验证成功"));
} else {
(100, "验证失败"));
}
}
public void checkSliding() {
String mX = getPara("x");
int x = Integer.parseInt(mX);
if (x == 261) {
renderJson(HttpResultEntry.ok("验证成功"));
} else {
(100, "验证失败"));
}
}
}
⽰例代码中的 getSessoin() 和 getRequest()  为⾃⼰封闭的，其实就是普通的 session 和 request ，⾃⾏替换就⾏了。另外，这个⽰例代码中的，是⽤JFianl， 也可以直接换成直接返回状态和消息
然后，有JSP ⾥，弄⼀个IMG 元素，去调⽤后台的⽣成图⽚的⽅法：
<div>
<img id="imageCheck" src="getImg" />
</div>
⽣成的图⽚的效果：
最后，⽤JQuery ，点击图⽚的事件，当点击图⽚后，获取点击的位置，⽤这个位置去后台验证，简单的⽰例代码：
$("#imageCheck").click(function(event){
var x=event.offsetX;//获取点击时⿏标相对图⽚坐标
var y=event.offsetY;
jquery怎么进行验证console.log("X==>"+x+", Y==>"+y);
$.ajax({
url: "checkImg",
type: "POST",
dataType: "json",
data:{'x':x,"y":y},
success:function(rsp){
console.de);
console.log(rsp.msg);
}
})
});
这样，点击之后就验证：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。