iT邦幫忙

DAY 7
5

JSP 學習分享系列 第 7

使用JSP產生一個數字類型的圖片辦識碼

  • 分享至 

  • xImage
  •  

一個實用範例,總共三隻程式, 一個是圖片產生,一個是輸入畫面,最後一個是驗證結果,可以讓你的登入畫面加分的程式
1.圖片產生JSP,說明寫在程式裡
這裡有一個地方要注意 - contentType要設成image/jpeg
=== newImage.jsp ===

  <%@page contentType="image/jpeg" pageEncoding="UTF-8"%>
<%@ page 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));

// 隨機產生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(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 調用函數出來的顏色相同,可能是因為種子太接近,所以只能直接生成
    g.drawString(rand,13*i+6,16);
}

// 將認證碼存入SESSION
session.setAttribute("rand",sRand);

// 圖像生效
g.dispose();

// 輸出圖像到頁面
ImageIO.write(image, "JPEG", response.getOutputStream());
%>

2.輸入的畫面,這裡會把上一個結果引用進來
這裡有一個地方要注意- img 的使用
=== inputImage.jsp ===

  <%@page contentType="text/html" pageEncoding="UTF-8"%>

  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>認證碼輸入頁面</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
  
  
    <form method="post" action="check.jsp" name="insImg">
      系統產生的認證碼:<img src="newImage.jsp" alt="New Image"/><br>
      輸入上面的認證碼:<input type="text" name="insrand" maxlength="4"/><br>
      <input type="submit" value="Submit">
    </form>
  

3.驗證結果
把session裡的值和使用者輸入的值做比較
=== check.jsp ===

  <%@page contentType="text/html" pageEncoding="UTF-8"%>

  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>認證結果</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
  
  
    <%
 String rand = (String)session.getAttribute("rand");
 String input = request.getParameter("insrand");
%>
系統產生的認證碼為: <%= rand %><br>
您輸入的認證碼為: <%= input %><br>
<br>
  <%
    if (rand.equals(input)) {
  %>
    <font color=green>輸入相同,認證成功!</font>
  <%
    } else {
  %>
    <font color=red>輸入不同,認證失敗!</font>
  <%
    }
  %>
  

上一篇
JSP 之Cookie範例
下一篇
JSP 和HTML Tag交互使用範例
系列文
JSP 學習分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言