Jsp常用技巧图片验证码
- 格式:doc
- 大小:196.00 KB
- 文档页数:18
JS实现图⽚验证码功能本⽂实例为⼤家分享了JS实现图⽚验证码功能的具体代码,供⼤家参考,具体内容如下以下代码可以直接copy运⾏,不需要引⼊jquery.jar1. html代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="<%=request.getContextPath()%>/js/gVerify.js"></script><style type="text/css">body, html {width: 100%;text-align: center;}#picyzm {width: 100px;height: 40px;display: inline-block;margin: 0 30px;}#verifyCodeDemo {width: 100%;display: flex;margin-top: 200px;justify-content: center;}#btn {margin: 30px auto;background-color: blue;color: #fff;border-radius: 5px;border: 0;width: 100px;height: 40px;}</style></head><body><div id="verifyCodeDemo"><input type="text" id="code_input" placeholder="在这个框⾥输⼊验证码"><p id="picyzm"></p></div><input type="button" value="验证" id="btn"><script type="text/javascript">//初始化验证码var verifyCode = new GVerify({id : "picyzm",type : "blend"});//点击按钮验证var code = document.getElementById("code_input");var btn = document.getElementById("btn");btn.onclick = function() {var res = verifyCode.validate(code.value);if (res) {alert("验证通过");} else {alert("验证码错误");}}</script></body></html>2. 引⼊gVerify.js!(function(window, document) {function GVerify(options) { // 创建⼀个图形验证码对象,接收options对象为参数this.options = { // 默认options参数值id: "", // 容器IdcanvasId: "verifyCanvas", // canvas的IDwidth: "100", // 默认canvas宽度height: "30", // 默认canvas⾼度type: "blend", // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母code: ""}if(Object.prototype.toString.call(options) == "[object Object]"){// 判断传⼊参数类型for(var i in options) { // 根据传⼊的参数,修改默认参数值this.options[i] = options[i];}}else{this.options.id = options;}this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");this.options.letterArr = getAllLetter();this._init();this.refresh();}GVerify.prototype = {/** 版本号* */version: '1.0.0',/** 初始化⽅法* */_init: function() {var con = document.getElementById(this.options.id);var canvas = document.createElement("canvas");this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";canvas.id = this.options.canvasId;canvas.width = this.options.width;canvas.height = this.options.height;canvas.style.cursor = "pointer";canvas.innerHTML = "您的浏览器版本不⽀持canvas";con.appendChild(canvas);var parent = this;canvas.onclick = function(){parent.refresh();}},/** ⽣成验证码* */refresh: function() {this.options.code = "";var canvas = document.getElementById(this.options.canvasId);if(canvas.getContext) {var ctx = canvas.getContext('2d');}else{return;}ctx.textBaseline = "middle";ctx.fillStyle = randomColor(180, 240);ctx.fillRect(0, 0, this.options.width, this.options.height);if(this.options.type == "blend") { // 判断验证码类型var txtArr = this.options.numArr.concat(this.options.letterArr);} else if(this.options.type == "number") {var txtArr = this.options.numArr;} else {var txtArr = this.options.letterArr;}for(var i = 1; i <= 4; i++) {var txt = txtArr[randomNum(0, txtArr.length)];this.options.code += txt;ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; // 随机⽣成字体⼤⼩ ctx.fillStyle = randomColor(50, 160); // 随机⽣成字体颜⾊ctx.shadowOffsetX = randomNum(-3, 3);ctx.shadowOffsetY = randomNum(-3, 3);ctx.shadowBlur = randomNum(-3, 3);ctx.shadowColor = "rgba(0, 0, 0, 0.3)";var x = this.options.width / 5 * i;var y = this.options.height / 2;var deg = randomNum(-30, 30);/** 设置旋转⾓度和坐标原点* */ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 0, 0);/** 恢复旋转⾓度和坐标原点* */ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/** 绘制⼲扰线* */for(var i = 0; i < 4; i++) {ctx.strokeStyle = randomColor(40, 180);ctx.beginPath();ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));ctx.stroke();}/** 绘制⼲扰点* */for(var i = 0; i < this.options.width/4; i++) {ctx.fillStyle = randomColor(0, 255);ctx.beginPath();ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);ctx.fill();}},/** 验证验证码* */validate: function(code){var code = code.toLowerCase();var v_code = this.options.code.toLowerCase();if(code == v_code){return true;}else{return false;}}}/** ⽣成字母数组* */function getAllLetter() {var letterStr = "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"; return letterStr.split(",");}/** ⽣成⼀个随机数* */function randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}/** ⽣成⼀个随机⾊* */function randomColor(min, max) {var r = randomNum(min, max);var g = randomNum(min, max);var b = randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}window.GVerify = GVerify;})(window, document);3. 效果图以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
Java 验证码1、servlet上画图片:publicclass UserCheckServlet extends HttpServlet {publicvoid doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}publicvoid doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 验证码图片的宽度。
int width = 70;// 验证码图片的高度。
int height = 30;BufferedImagebuffImg = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);Graphics2D g = buffImg.createGraphics();// 创建一个随机数生成器类。
Random random = new Random();// 设定图像背景色(因为是做背景,所以偏淡)g.setColor(getRandColor(200,250));g.fillRect(0, 0, width, height);// 创建字体,字体的大小应该根据图片的高度来定。
Font font = new Font("Times New Roman", Font.HANGING_BASELINE, 28);// 设置字体。
g.setFont(font);// 画边框。
g.setColor(Color.BLACK);g.drawRect(0, 0, width - 1, height - 1);// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到。
jsp常用验证格式2篇JSP常用验证格式JSP(Java Server Pages)是一种用于开发Web应用程序的Java 技术。
在开发Web应用程序中,我们经常需要对用户输入进行合法性验证,以确保输入的数据符合我们的要求。
本文将介绍JSP中常用的验证格式。
一、表单验证表单验证是Web开发中最常见的验证方式之一。
用户提交表单时,我们可以通过JSP对各个字段进行验证,以确保提交的数据是正确的。
1. 非空验证非空验证是最基本的验证方式之一。
当用户提交表单时,我们可以通过JSP判断各个字段是否为空,如果为空,则提示用户必须填写该字段才能继续提交。
2. 数据类型验证数据类型验证是对用户输入的数据进行类型判断的一种验证方式。
例如,如果我们需要用户输入一个数字,那么我们可以通过JSP判断用户输入的数据是否符合数字类型,并给出相应的提示信息。
3. 长度验证长度验证是对用户输入的数据进行长度判断的一种验证方式。
例如,如果我们需要用户输入一个长度为6的验证码,那么我们可以通过JSP判断用户输入的验证码是否为6位,并给出相应的提示信息。
二、正则表达式验证正则表达式是一种强大的验证工具,可以通过一些特定的规则匹配用户输入的数据。
在JSP中,我们可以使用正则表达式对用户输入的数据进行验证。
1. 邮箱验证邮箱验证是一种常见的验证方式,我们可以使用正则表达式对用户输入的邮箱进行验证。
例如,我们可以使用以下正则表达式判断一个字符串是否符合邮箱格式:^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$2. 手机号码验证手机号码验证也是一种常见的验证方式,我们可以使用正则表达式对用户输入的手机号码进行验证。
例如,我们可以使用以下正则表达式判断一个字符串是否符合手机号码格式:^1[3|4|5|6|7|8|9][0-9]{9}$三、其他验证方式除了表单验证和正则表达式验证外,JSP还提供了其他一些常用的验证方式。
用ServletJSP动态生成图像验证码现在有不少网站在用户填写表单时,同时要求填写验证码,验证码的一个目的就是防范一些恶意的网站下载软件,这些软件能通过遍历链接而将网站的所有网页下载。
还可以防止用户不经过本网站的页面而使用网站的资源。
所以现在有不少网站都使用了验证码技术,验证码通常是一个在WEB服务器上生成的随机字符串,同时以某种方式保存起来,比如保存到与当前的Session中,然后在用户提交网页时与用户输入的验证比较是否一致,然而如果直接以明文的方式,还是不能防范一些功能较强的自动填写表格的软件。
所以一般将验证码以图片的形式显示出来,同时可以将在图片中显示的字符串进行一些处理,比如使用旋转字符,添加背景纹理等技术以增大被软件识别的难度。
下面简要介绍一下如果实现这种验证码:首先实现一个servlet用来生成图片(当然也可以用jsp实现):import javax.servlet.*;import javax.servlet.http.*;import java.io.*;import java.util.*;import com.sun.image.codec.jpeg.*;import java.awt.*;import com.sun.image.codec.jpeg.*;import java.awt.image.BufferedImage;import java.awt.image.DataBuffer;import java.awt.geom.GeneralPath;import javax.swing.*;import java.math.*;public class Servlet1extends HttpServlet {//Process the HTTP Get requestpublic void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType(CONTENT_TYPE);response.setContentType("image/jpeg"); //必须设置ContentType为image/jpegint length = 4; //设置默认生成4个数字Date d = new Date();long lseed = d.getTime();java.util.Random r = new Random(lseed); //设置随机种子if (request.getParameter("length") != null) {try {length = Integer.parseInt(request.getParameter("length"));}catch (NumberFormatException e) {}}StringBuffer str = new StringBuffer();for (int i = 0; i <length; i++) {str.append(r.nextInt(9)); //生成随机数字}//可以在此加入保存验证码的代码//创建内存图像BufferedImage bi = new BufferedImage(40, 16, BufferedImage.TYPE_INT_RGB); Graphics2D g = bi.createGraphics();g.clearRect(0, 0, 16, 40);g.setColor(Color.green.CY AN);g.drawString(str.toString(), 4, 12);try {//使用JPEG编码,输出到response的输出流JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(response. getOutputStream());JPEGEncodeParam param = encoder.getDefaultJPEGEncodeParam(bi);param.setQuality(1.0f, false);encoder.setJPEGEncodeParam(param);encoder.encode(bi);}catch (Exception ex) {}}}然后在需求显示验证码的加入以下代码就可以了<img alt="" src="/WebModule1/servlet1" width="40" height="16"/>将/WebModule1/servlet1替换成你用来生成验证码的servlet的全路径。
JavaScript模拟实现12306图片验证码逐梦博客看12306的图片验证码挺好玩的,拿起js我也来实现一个。
既然是验证码就有显示,输入和验证三个过程1、显示12306的图片验证码是把一些小图显示在一张大图上,为了实现这个,我去网上找了一些图片,把同一类别的图片放在一个文件夹下面,根据序号依次命名,这个步骤做完就只需要建立索引数组,标记物体名(文件夹以物体名命名)和物体总图片个数,这样子我们就可以从中随记冲去任意一个物体的任意一张图片。
2、输入输入就是点击图片时会插入的那些笔记小图标啦,对于这些小图标,需要记录下它相对于大图的偏移坐标作为后期验证的依据。
3、验证验证的过程需要从生成图片的时候就开始了,首先我们会从索引数组中抽取任意张图片(在这里8张)形成一个图片数组,打乱数组的顺序,然后将图片依次画到大图上面去,在这里使用的是canvas,在画小图的过程中,根据显示的偏移量生成验证数组,最后将我们点选图片不同位置时生成的便宜坐标拿过来以此和验证数组进行比对。
在这里有一个问题,就是只有点选的坐标数等于验证数组的长度才进行比对,如果长度不一样,那输入肯定是错的。
代码实现:;(function(){var Code = (function(){var canvas,ctx,W,H,picWidth,gap,codeInfo,vCode = [],sources = {};var init = function(){W = 293;H = 190;var codeContainer = document.createElement("div");codeContainer.style.cssText=";width:"+W+"px;height:"+H+" px;position:relative;";codeContainer.id = "codeContainer";canvas = document.createElement("canvas");ctx = canvas.getContext("2d");picWidth = 70;gap = 3;canvas.width = W;canvas.height = H;codeContainer.appendChild(canvas);document.body.appendChild(codeContainer);sources = [{ "name" : "ant" ,"title" : "蚂蚁" , "count" : 2},{ "name" : "bee" ,"title" : "蜜蜂" , "count" : 2},{ "name" : "fan" ,"title" : "电风扇" , "count" : 1},{ "name" : "flower" ,"title" : "花儿" , "count" : 2},{ "name" : "hopper" ,"title" : "蚂蚱" , "count" : 2}];generateCode();createRefreshButton();}var generateCode = function(){clear();codeInfo = getTarget();var pics = getPics();drawTitle(codeInfo.title);particlePics(pics);}var createRefreshButton = function(){var d = document.createElement("div");d.className = 'refresh';canvas.parentNode.appendChild(d);}var drawTitle = function(name){var pre = "请点击下图中",middle = "所有的";ctx.fillStyle = "#000";ctx.font = "16px Arial";ctx.fillText(pre,2,16);ctx.fillStyle = "#f00";ctx.fillText(middle,textWidth(pre,16)+rand(1,3),16);ctx.fillStyle = randC();ctx.font = "20px Arial";ctx.fillText(name,textWidth(pre+middle,16)+rand(2,5),16);drawLine();}var drawLine = function(){ctx.beginPath();ctx.moveTo(0,25);ctx.lineTo(W,25);ctx.stroke();}var getPics = function(){var codeCount = Math.round(Math.random()*(codeInfo.count<8?codeInfo.count: 8)),itemArr = [],extraArr = [],pics = [];codeCount = codeCount ? codeCount: codeCount + 1;var extraCount = 8 - codeCount;for(var i=0;i<codeInfo.count;i++){var src = "images/"+ + "/" + (i+1) +".jpg";var im = new Image();im.src = src;itemArr.push({'img' : im,'name' : });}while(codeCount>0){var index = Math.floor(Math.random()*itemArr.length),src = itemArr[index];pics.push(src);itemArr.splice(index,1);codeCount--;}for(var index in sources){var item = sources[index];if(!=){for(var i=0;i<item.count;i++){var src = "images/"+ + "/" + (i+1) +".jpg";var im = new Image();im.src = src;extraArr.push({'img' : im,'name' : });}}}while(extraCount>0){var index = Math.floor(Math.random()*extraArr.length),src = extraArr[index];pics.push(src);extraArr.splice(index,1);extraCount--;}return pics;}var particlePics = function(pics){var pics = randArray(pics);for(var i=0,l=pics.length;i<l;i++){(function(i){var item = pics[i],im = item.img,x = (i%4)*(picWidth+gap),y=((i/4)>>0)*(picWidth+gap)+35;if(===){vCode.push({'x' : x,'y' : y})}im.onload = function(){ctx.drawImage(im,x,y);}})(i);}}var verify = function(select,callback){var len = vCode.length;callback && callback();if(select.length!==len){alert("验证失败!");reload();return;}var count = 0;for(var i=0,l=select.length;i<l;i++){var item = select[i];vCode.map(function(row){if(item.x>=row.x&&item.x<=row.x+picWidth&&item.y>=ro w.y&&item.y<=row.y+picWidth){count++;}})}if(count!==len){alert("验证失败!");reload();return;}else{alert("验证成功!");reload();return;}}var reload = function(){vCode.length = 0;generateCode();}var clear = function(){ctx.clearRect(0,0,W,H);}var getTarget = function(){return sources[Math.floor(Math.random()*sources.length)];}var textWidth = function(string,size){ctx.font = size + "px Arial";return ctx.measureText(string).width;}var rand = function(min,max){return Math.random() * (max - min) + min;}var randC = function(){return "rgb(" + ((Math.random() * 255)>>0) + "," + ((Math.random() * 255)>>0) + "," +((Math.random() * 255)>>0) +")";}var randArray = function(arr){return arr.sort(function(a,b){return Math.random()>0.5?true:false;});}return {init : init,verify : verify,reload : reload}})();window.Code = window.Code || Code;})();在线实例:。
<%@ page contentType="image/jpeg"import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %> <%!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);}%><%//设置页面不缓存response.setHeader("Pragma","No-cache");response.setHeader("Cache-Control","no-cache");response.setDateHeader("Expires", 0);// 在内存中创建图象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));//画边框//g.setColor(new Color());//g.drawRect(0,0,width-1,height-1);// 随机产生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<4;i++){String rand=String.valueOf(random.nextInt(10));sRand+=rand;// 将认证码显示到图象中g.setColor(newColor(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt (110)));//调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成g.drawString(rand,13*i+6,16);}// 将认证码存入SESSIONsession.setAttribute("rand",sRand);// 图象生效g.dispose();// 输出图象到页面ImageIO.write(image, "JPEG", response.getOutputStream());%>保存成image.jsp,调用的时候用<img src="image.jsp" width="60"height="20">就可以了1、图片类package com.esoon.EZActor.ezconfig;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.util.Random;public class Image {public String sRand = "";public 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);}public BufferedImage creatImage() {// 在内存中创建图象int width = 60, height = 20;BufferedImage image = new BufferedImage(width, height, BufferedIm age.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));//画边框//g.setColor(new Color());//g.drawRect(0,0,width-1,height-1);// 随机产生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(120);int yl = random.nextInt(120);g.drawLine(x, y, x + xl, y + yl);}// 取随机产生的认证码(4位数字)//String rand = request.getParameter("rand");//rand = rand.substring(0,rand.indexOf("."));for (int i = 0; i < 4; i++) {String rand = String.valueOf(random.nextInt(10));sRand += rand;// 将认证码显示到图象中g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); //调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成g.drawString(rand, 13 * i + 6, 16);}// 图象生效g.dispose();return image;}}显示图片Servletpackage com.esoon.EZActor.ezconfig;import java.io.IOException;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class RandomImage extends HttpServlet {/*** Constructor of the object.*/public RandomImage() {super();}public void doGet(HttpServletRequest request, HttpServletResponse resp onse)throws ServletException, IOException {// 设置输出格式response.setContentType("image/jpeg");// 设置页面不缓存response.setHeader("Pragma","No-cache");response.setHeader("Cache-Control","no-cache");response.setDateHeader("Expires", 0);// 生成图片Image image = new Image();// 输出图象到页面ImageIO.write(image.creatImage(), "JPEG", response.getOutputStream ());// 打印验证码System.out.println(image.sRand);}public void doPost(HttpServletRequest request, HttpServletResponse resp onse)throws ServletException, IOException {doGet(request, response);}}。
AJAX+jsp无刷新验证码实例(完整代码)1.login.jsp<%@ pagelanguage="java"contentType="text/html;charset=gb2312"import = "java.util.*"import = "java.sql.*"import = "java.text.*"import = "java.io.*"%><%@ include file="../conn.jsp"%><%request.setCharacterEncoding("gb2312");%><%String username=request.getParameter("name");String pass=request.getParameter("pws");String num=request.getParameter("num");String random=(String)session.getAttribute("random");if(num!=null&&random!=null){if(num.equals(random)){Statement stmt=conn.createStatement();ResultSet rs=stmt.executeQuery("select * from admin where admin='"+username+"' and pass='"+pass+"'");if(rs.next()){String id=rs.getString("id");session.setAttribute("id",id);response.sendRedirect("admin.jsp");}rs.close();stmt.close();conn.close();}}%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>两岸咖啡</title><link href="../include/style.css" rel="stylesheet" type="text/css" /><script src="net.js"></script><script type="text/javascript">var times=0;function subform(){var gtext=this.req.responseText;var info=document.getElementById("info");if(gtext.indexOf("validate_successful")!=-1){//info.innerHTML="<font color=green>验证码通过</font>";document.forms["form"].submit();//当得到的值表示合法,则验证码通过。
code.jspview plaincopy to clipboardprint?1.<%@ page language="java" pageEncoding="GBK" contentType="image/jpeg" %>2.<%@ page import= "java.awt.* , java.awt.geom.* , java.awt.image.* ,javax.imageio.*, java.awt.font.*" %>3.<%!4.//随机获取一个字母5.String randChar()6.{7.int num = (int)(Math.random()*26)+65;8.char c = (char)num;9.return String.valueOf(c);10.}11.//随机颜色12.Color randColor()13.{14.int r= (int)(Math.random()*256);15.int g= (int)(Math.random()*256);16.int b= (int)(Math.random()*256);17.return new Color(r,g,b);18.}19.//输出一个字符20.void printChar(int x , int y,char code,Graphics2D g2)21.{22.String strCode = String.valueOf(code);23.AffineTransform at = AffineTransform.getTranslateInstance(x,y);24.FontRenderContext frc = new FontRenderContext(at,true,true);25.TextLayout tl = new TextLayout(strCode,newFont("Arial",Font.BOLD+Font.ITALIC,30),frc);26.Shape sha=tl.getOutline(at);27.g2.setColor(randColor());28.g2.setStroke(new BasicStroke(3.0f));29.g2.draw(sha);30.g2.setColor(Color.white);31.g2.setStroke(new BasicStroke(0));32.g2.fill(sha);33.}34.%>35.<%36.//图像大小37.int width = 100;38.int height = 35;39.40.//验证字符41.String strCode =(int)(Math.random()*10)+randChar()+(int)(Math.random()*10)+randChar();42.43.//创建图像44.BufferedImage img = newBufferedImage(width,height,BufferedImage.TYPE_INT_RGB);45.46.Graphics g = img.getGraphics();47.Graphics2D g2 = (Graphics2D)g;48.49.//绘制背景色50.g.setColor(Color.white);51.g.fillRect(0,0,width,height);52.53.//绘制黑边54.g.setColor(Color.black);55.g.drawRect(0,0,width-1,height-1);56.57.//绘制30条干绕线58.for(int j=1;j<=30;j++)59.{60.int x1 = (int)(Math.random()*width/4);61.int x2 = (int)(Math.random()*width) + x1;62.int y1 = (int)(Math.random()*height);63.int y2 = (int)(Math.random()*height);64.g2.setColor(randColor());65.g2.setStroke(new BasicStroke(1.5f));66.g2.drawLine(x1,y1,x2,y2);67.}68.69.//绘制文本70.for(int i=0;i<strCode.length();i++)71.{72.printChar(20*i+10 , 28+(i%2==0 ? 3:-3),strCode.charAt(i),g2);73.}74.75.//写入session76.session.setAttribute("code",strCode);77.78.//输出图像79.g.dispose();80.ImageIO.write(img,"jpeg",response.getOutputStream());81.out.clear();82.out = pageContext.pushBody();83.%>使用方法:<img src="code.jsp" alt="验证码" title="点击更换图片" />因为验证码写入了session,所以使用时,只需从session中取出来进行比较即可。
Java⽣成验证码原理(jsp)验证码的作⽤: 验证码是Completely Automated Public Turing test to tell Computers and Humans Apart(全⾃动区分计算机和⼈类的图灵测试)的缩写,是⼀种区分⽤户是计算机还是⼈的公共全⾃动程序,可以防⽌:恶意破解密码、刷票、论坛灌⽔、有效防⽌某个⿊客对某⼀特定注册⽤户,⽤特定程序暴⼒破解⽅式进⾏不断的登录尝试。
实际上验证码是现在很多⽹站通⾏的⽅式,我们利⽤⽐较简易的⽅式实现了这个功能。
第⼀代:标准验证码这⼀代验证码是即是我们常见的图形验证码、语⾳验证码,基于机器难以处理复杂的计算机视觉及语⾳识别问题,⽽⼈类却可以轻松的识别来区分⼈类及机器。
这⼀代验证码初步利⽤了⼈类知识容易解答,⽽计算机难以解答的机制进⾏⼈机判断。
下⾯这种验证码就是第⼀代Java 中⽣成验证码,⼀个.java就可以了ValidateCodeServlet.javapackage com.hpe.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.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/ValidateCodeServlet")public class ValidateCodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;public ValidateCodeServlet() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 响应头信息response.setHeader("Pragma", "No-Cache");response.setHeader("Cache-Control", "no-cache");response.setDateHeader("Expries", 0);// 随机数⽣成类Random random = new Random();// 定义验证码的位数int size = 5;// 定义变量保存⽣成的验证码String vCode = "";char c;// 产⽣验证码for (int i = 0; i < size; i++) {// 产⽣⼀个26以内的随机整数int number = random.nextInt(26);// 如果⽣成的是偶数,则随机⽣成⼀个数字if (number % 2 == 0) {c = (char) ('0' + (char) ((int) (Math.random() * 10)));// 如果⽣成的是奇数,则随机⽣成⼀个字母} else {c = (char) ((char) ((int) (Math.random() * 26)) + 'A');}vCode = vCode + c;}// 保存⽣成的5位验证码request.getSession().setAttribute("vCode", vCode);// 验证码图⽚的⽣成// 定义图⽚的宽度和⾼度int width = (int) Math.ceil(size * 20);int height = 50;BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// 获取图⽚的上下⽂Graphics gr = image.getGraphics();// 设定图⽚背景颜⾊gr.setColor(Color.WHITE);gr.fillRect(0, 0, width, height);// 设定图⽚边框gr.setColor(Color.GRAY);gr.drawRect(0, 0, width - 1, height - 1);// 画⼗条⼲扰线for (int i = 0; i < 5; i++) {int x1 = random.nextInt(width);int y1 = random.nextInt(height);int x2 = random.nextInt(width);int y2 = random.nextInt(height);gr.setColor(randomColor());gr.drawLine(x1, y1, x2, y2);}// 设置字体,画验证码gr.setColor(randomColor());gr.setFont(randomFont());gr.drawString(vCode, 10, 22);// 图像⽣效gr.dispose();// 输出到页⾯ImageIO.write(image, "JPEG", response.getOutputStream());}// ⽣成随机的颜⾊private Color randomColor() {int red = r.nextInt(150);int green = r.nextInt(150);int blue = r.nextInt(150);return new Color(red, green, blue);}private String[] fontNames = { "宋体", "华⽂楷体", "⿊体", "微软雅⿊", "楷体_GB2312" }; private Random r = new Random();// ⽣成随机的字体private Font randomFont() {int index = r.nextInt(fontNames.length);String fontName = fontNames[index];// ⽣成随机的字体名称int style = r.nextInt(4);int size = r.nextInt(3) + 24; // ⽣成随机字号, 24 ~ 28return new Font(fontName, style, size);}}直接运⾏Java⽣成的结果:在jsp⽹页上显⽰的效果:jsp代码:<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><title>login</title><link href="css/login.css" type="text/css" rel="stylesheet"><script type="text/javascript">function $(id){return document.getElementById(id);}function changeCode(){$("code").src = "ValidateCodeServlet?a="+new Date();}</script></head><body><div class="login"><div class="message">欢迎登录</div><hr class="hr15"><div id="darkbannerwrap"></div><form method="post"><input name="action" value="login" type="hidden"> <inputname="username" placeholder="⽤户名" required="" type="text"><hr class="hr15"><input name="password" placeholder="密码" required="" type="password"><hr class="hr15"><input name="check_code" placeholder="验证码" required="" type="text"style="width: 30%;"> <img class="img_code"src="ValidateCodeServlet" id="code" /> <a class="a_code"href="javascript:changeCode()">换⼀张</a><hr class="hr15"></form></div> </body> </html>。
Jsp常用技巧:图片验证码2007-12-28 21:08:09 已被阅读:371 发表评论思路:图片验证码的实现主要的技术点是如何生成一个图片。
生成图片可以使用java.awt包下的类来实现。
我们先写一个简单的生成图片的程序HelloImage.java。
以下是代码部分。
package com.vogoal.test;import java.awt.Color;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.File;import java.io.IOException;import javax.imageio.ImageIO;/*** @author SinNeR@* create a image*/public class HelloImage {public static void main(String[] args){BufferedImage image = new BufferedImage(80, 25,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();g.setColor(new Color(255,255,255));g.fillRect(0, 0, 80, 25);g.setColor(new Color(0,0,0));g.drawString("HelloImage",6,16);g.dispose();try{ImageIO.write(image, "jpeg", new File("C:\\helloImage.jpeg"));}catch(IOException e){e.printStackTrace();}}}编译后,在DOS下调用这个程序,正常情况下,会在C盘根目录下生成一张名字helloImage.jpeg为的图片。
图片上有文字HelloImage。
简单介绍下生成图片的流程:1.建立BufferedImage对象。
指定图片的长度宽度和色彩。
BufferedImage image = new BufferedImage(80,25,BufferedImage.TYPE_INT_RGB);2.取得Graphics对象,用来绘制图片。
Graphics g = image.getGraphics();3.绘制图片背景和文字。
4.释放Graphics对象所占用的资源。
g.dispose();5.通过ImageIO对象的write静态方法将图片输出。
ImageIO.write(image, "jpeg", new File("C:¥¥helloImage.jpeg"));知道了图片的生成方法,剩下的问题就是如何将随机数生成到页面上了。
要显示图片,我们只要将生成的图片流返回给response对象,这样用户请求的时候就可以得到图片。
而一个jsp页面的page参数的contentType属性可以指定返回的response对象的形式,我们平时的jsp页面中设定的contentType是text/html,所以会被以HTML文件的形式读取分析。
如果设定为image/jpeg,就会被以图片的形式读取分析。
确定了这点后就可以着手实现。
1.修改生成图片的类,添加生成随机字符串的方法,并取得用户传过来的response对象将图片流输出到response对象中。
同时为了更友好和可订制,添加了一个构造函数,可以修改图片验证码的长度,以及验证码的码字范围。
并且可以设定验证码的背景色。
(用户使用时可以设定验证图片的背景色与页面的背景色相同)2.写一个jsp文件,用来调用生成验证码图片的类。
并得到生成的验证码,存入session。
以下是生成验证码图片的类RandImgCreater。
(操作系统的原因,没有写注释,避免乱码)package com.vogoal.util.img;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.http.HttpServletResponse;/*** @author SinNeR* * image check creater*/public class RandImgCreater {private static final String CODE_LIST = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"; private HttpServletResponse response = null;private static final int HEIGHT = 20;private static final int FONT_NUM = 4;private int width = 0;private int iNum = 0;private String codeList = "";private boolean drawBgFlag = false;private int rBg = 0;private int gBg = 0;private int bBg = 0;public RandImgCreater(HttpServletResponse response) {this.response = response;this.width = 13 * FONT_NUM + 12;this.iNum = FONT_NUM;this.codeList = CODE_LIST;}public RandImgCreater(HttpServletResponse response,int iNum,String codeList) { this.response = response;this.width = 13 * iNum + 12;this.iNum = iNum;this.codeList = codeList;}public String createRandImage(){BufferedImage image = new BufferedImage(width, HEIGHT,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();Random random = new Random();if ( drawBgFlag ){g.setColor(new Color(rBg,gBg,bBg));g.fillRect(0, 0, width, HEIGHT);}else{g.setColor(getRandColor(200, 250));g.fillRect(0, 0, width, HEIGHT);for (int i = 0; i < 155; i++) {g.setColor(getRandColor(140, 200));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);}}g.setFont(new Font("Times New Roman", Font.PLAIN, 18));String sRand="";for (int i=0;i<iNum;i++){int rand=random.nextInt(codeList.length());String strRand=codeList.substring(rand,rand+1);sRand+=strRand;g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));g.drawString(strRand,13*i+6,16);}g.dispose();try{ImageIO.write(image, "JPEG", response.getOutputStream());}catch(IOException e){}return sRand;}public void setBgColor(int r,int g,int b){drawBgFlag = true;this.rBg = r;this.gBg = g;this.bBg = b;}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);}}以下是调用生成验证码图片的类的jsp文件:<%@ page contentType="image/jpeg" import="com.vogoal.util.img.*" %> <%response.setHeader("Pragma","No-cache");response.setHeader("Cache-Control","no-cache");response.setDateHeader("Expires", 0);RandImgCreater rc = new RandImgCreater(response);//RandImgCreater rc = new RandImgCreater(response,8,"abcdef");//rc.setBgColor(100,100,100);String rand = rc.createRandImage();session.setAttribute("rand",rand);%>将java程序编译后得到的class,放到Tomcat自己的web应用的class的目录下,并写一个测试程序。