設(shè)為首頁(yè) | 加為收藏 | 聯(lián)系我們 咨詢(xún)熱線:0632-5272123
電 話:0632-5272123
傳 真:0632-5271123
地 址: 棗莊市文化西路23號(hào)
E-mail:zzint@zzint.com
  • 技術(shù)咨詢(xún):
  • 業(yè)務(wù)咨詢(xún):
  • 客戶服務(wù):
  • 服務(wù)監(jiān)督:
詳細(xì)資料 您當(dāng)前的位置:網(wǎng)站首頁(yè)新聞動(dòng)態(tài)詳細(xì)資料

棗莊JSP建站中Jsp常用技巧:圖片驗(yàn)證碼

思路

圖片驗(yàn)證碼的實(shí)現(xiàn)主要的技術(shù)點(diǎn)是如何生成一個(gè)圖片。生成圖片可以使用java.awt包下的類(lèi)來(lái)實(shí)現(xiàn)。我們先寫(xiě)一個(gè)簡(jiǎn)單的生成圖片的程序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@blueidea.com 
* 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下調(diào)用這個(gè)程序,正常情況下,會(huì)在C盤(pán)根目錄下生成一張名字helloImage.jpeg為的圖片。圖片上有文字HelloImage。

簡(jiǎn)單介紹下生成圖片的流程

  1. 建立BufferedImage對(duì)象。指定圖片的長(zhǎng)度寬度和色彩。
    BufferedImage image = new BufferedImage(80,25,BufferedImage.TYPE_INT_RGB);
  2. 取得Graphics對(duì)象,用來(lái)繪制圖片。
    Graphics g = image.getGraphics();
  3. 繪制圖片背景和文字。
  4. 釋放Graphics對(duì)象所占用的資源。
    g.dispose();
  5. 通過(guò)ImageIO對(duì)象的write靜態(tài)方法將圖片輸出。
    ImageIO.write(image, "jpeg", new File("C:\\helloImage.jpeg"));

知道了圖片的生成方法,剩下的問(wèn)題就是如何將隨機(jī)數(shù)生成到頁(yè)面上了。要顯示圖片,我們只要將生成的圖片流返回給response對(duì)象,這樣用戶請(qǐng)求的時(shí)候就可以得到圖片。而一個(gè)jsp頁(yè)面的page參數(shù)的contentType屬性可以指定返回的response對(duì)象的形式,我們平時(shí)的jsp頁(yè)面中設(shè)定的contentType是text/html,所以會(huì)被以HTML文件的形式讀取分析。如果設(shè)定為image/jpeg,就會(huì)被以圖片的形式讀取分析。確定了這點(diǎn)后就可以著手實(shí)現(xiàn)。

  1. 修改生成圖片的類(lèi),添加生成隨機(jī)字符串的方法,并取得用戶傳過(guò)來(lái)的response對(duì)象將圖片流輸出到response對(duì)象中。同時(shí)為了更友好和可訂制,添加了一個(gè)構(gòu)造函數(shù),可以修改圖片驗(yàn)證碼的長(zhǎng)度,以及驗(yàn)證碼的碼字范圍。并且可以設(shè)定驗(yàn)證碼的背景色。(用戶使用時(shí)可以設(shè)定驗(yàn)證圖片的背景色與頁(yè)面的背景色相同)
  2. 寫(xiě)一個(gè)jsp文件,用來(lái)調(diào)用生成驗(yàn)證碼圖片的類(lèi)。并得到生成的驗(yàn)證碼,存入session。

以下是生成驗(yàn)證碼圖片的類(lèi)RandImgCreater。(操作系統(tǒng)的原因,沒(méi)有寫(xiě)注釋?zhuān)苊鈦y碼)

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
* http://bbs.blueidea.com 
* 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);
}
}

 

以下是調(diào)用生成驗(yàn)證碼圖片的類(lèi)的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應(yīng)用的class的目錄下,并寫(xiě)一個(gè)測(cè)試程序。

請(qǐng)求頁(yè)面:

<form name="frm" method="post" action="chkImg.jsp">
Hello Image Test<br/>
checkCode:<img src="img.jsp"><br/>
please input the checkCode:<input type="text" name="code" value=""><br/>
<input type="submit" name="btn1" value="check">
</form>

驗(yàn)證頁(yè)面:

<%
String inputCode = request.getParameter("code");
String code = (String)session.getAttribute("rand");
if ( inputCode.equals(code) ){
%>
check SUCCESS!!!!!
<%}else{%>
wrong code!!!!!!!
<%}%>

將所有的jsp文件放到自己的web應(yīng)用的目錄下。

開(kāi)始測(cè)試:

啟動(dòng)Tomcat,訪問(wèn)請(qǐng)求頁(yè)面。

Jsp常用技巧:圖片驗(yàn)證碼

填入圖片上顯示的驗(yàn)證碼,點(diǎn)擊check按鈕,可以看到如下畫(huà)面。測(cè)試成功。

Jsp常用技巧:圖片驗(yàn)證碼

至此,jsp的圖片驗(yàn)證碼基本實(shí)現(xiàn)。實(shí)際中,我們可以用java的圖片類(lèi)實(shí)現(xiàn)更多的功能。如果有必要,會(huì)繼續(xù)討論實(shí)現(xiàn)方法。

使用幫助

附件中提供了圖片生成類(lèi)和jsp文件,測(cè)試jsp文件的下載。
使用過(guò)程中,可以修改img.jsp文件,從而符合自己要實(shí)現(xiàn)的功能要求。

1.構(gòu)造函數(shù)
RandImgCreater提供了2個(gè)構(gòu)造函數(shù)。
默認(rèn)的構(gòu)造函數(shù)需要設(shè)定response對(duì)象。
public RandImgCreater(HttpServletResponse response)
使用這個(gè)構(gòu)造函數(shù)的時(shí)候,生成4位驗(yàn)證碼圖片,驗(yàn)證碼為大小寫(xiě)英文字母和數(shù)字中的隨機(jī)組合。
public RandImgCreater(HttpServletResponse response,int iNum,String codeList)
使用這個(gè)構(gòu)造函數(shù)的時(shí)候,iNum為指定的顯示的驗(yàn)證碼的位數(shù),codeList為用戶指定的驗(yàn)證碼的生成元字符。(不支持中文)
使用例
RandImgCreater rc = new RandImgCreater(response,8,"abcdef");
將會(huì)生成從abcdef中隨機(jī)取出的8位驗(yàn)證碼圖片。

2.指定背景色
public void setBgColor(int r,int g,int b)
這個(gè)方法可選用。設(shè)定的時(shí)候,將會(huì)按照用戶指定的背景色顯示圖片背景,不設(shè)定的時(shí)候?qū)⑹褂媚J(rèn)背景。
r,g,b分別為RGB顏色中的各個(gè)色彩的設(shè)定值。取值范圍為0-255
使用例
rc.setBgColor(100,100,100);



上篇文章:對(duì)于棗莊JSP建站中JAVA基礎(chǔ)測(cè)試中常見(jiàn)問(wèn)題
下篇文章:棗莊做好困難救助600萬(wàn)善款助特困家庭溫暖過(guò)節(jié)
版權(quán)所有 棗莊市英特信息網(wǎng)絡(luò)有限公司 ◎2017
聯(lián)系電話:0632-5271123 5272123  總部地址:棗莊市市中區(qū)文化西路23號(hào)
魯ICP備09021689號(hào) 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證編號(hào):魯 B2-20080087號(hào)