視頻網站開發:JavaWeb畫登錄,註冊界面的圖片驗證碼(漢字,數字或英文)

      在如今這個互聯網技術十分發達的年代,各種技術層出不窮。各種網站,APP也都應運而生。細看這些網站,APP,都少不了登錄和註冊這一功能,因爲只有註冊後登陸了網站或APP才能爲各個用戶保存屬於他們自己的在相應網站,APP上的內容。把焦點集中到註冊或登錄的實現,不難發現,幾乎每一個正規的網站都會有圖片驗證碼這一驗證方式,它主要是爲了避免非用戶人工註冊即機器批量惡意註冊。而圖片驗證碼的形式也產生了很多種,先前常見的是數字或字母輸入驗證,還有漢字驗證。這些年又出了拖動拼圖驗證(比如QQ的登錄)等等,這篇文章我打算分享的是數字或字母或者漢字輸入的驗證方式,本文後端的實現使用的是Java的Servlet技術,其他後端語言還需做相應改動,不過相信本質還是一樣的。這裏先把我做的效果放上。

                                                          

      主要還是放代碼吧,一切言語還是沒有代碼來的實在!

1.實現畫想生成的字符的方法

//畫漢字
	private String drawRandomCh(Graphics2D g) {
		String s="";//隨機生成的四個字的組合
		g.setColor(Color.RED);
		g.setFont(new Font("宋體",Font.BOLD,20));
		String base="\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6";
		//\u4e00-\u9fa5
		for(int i=0;i<4;i++){
			int degree=new Random().nextInt()%30;
			String ch=base.charAt(new Random().nextInt(base.length()))+"";
			g.rotate(degree*Math.PI/180, 5+30*i, 20);
			g.drawString(ch, 5+30*i, 20);
			g.rotate(-degree*Math.PI/180, 5+30*i, 20);
			s=s+ch;
		}
		return s;
		
	}
//畫0-9數字
	private int drawNum(Graphics2D g) {
		int num=0;
		String nu="";
		g.setColor(Color.RED);
		g.setFont(new Font("宋體",Font.BOLD,20));
		for(int i=0;i<4;i++){
			int degree=new Random().nextInt()%30;
			int n=new Random().nextInt(10);
			g.rotate(degree*Math.PI/180, 5+30*i, 20);
			g.drawString(n+"", 5+30*i, 20);
			g.rotate(-degree*Math.PI/180, 5+30*i, 20);
			nu=nu+""+n;
		}
		return Integer.parseInt(nu);
	}
//畫0-9數字和所有大小寫字母
	private String drawNums(Graphics2D g) {
		String num="";//要返回的字符串
		char[] c={'0','1','2','3','4','5','6','7','8','9','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','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'};
		g.setColor(Color.RED);
		g.setFont(new Font("宋體",Font.BOLD,20));
		for(int i=0;i<4;i++){
			int degree=new Random().nextInt()%30;
			int n=new Random().nextInt(c.length);
			g.rotate(degree*Math.PI/180, 5+30*i, 20);
			g.drawString(c[n]+"", 5+30*i, 20);
			g.rotate(-degree*Math.PI/180, 5+30*i, 20);
			num=num+c[n];
		}
		return num;	
	}

2.畫背景,邊框,干擾線 的方法

private void setBackground(Graphics g) {
		// TODO Auto-generated method stub
		g.setColor(Color.BLUE);
		g.fillRect(0, 0, WIDTH, HEIGHT);
	}
	private void setBorder(Graphics g) {
		// TODO Auto-generated method stub
		g.setColor(Color.WHITE);
		g.fillRect(1,1,WIDTH-2,HEIGHT-2);
	}
	private void drawRandomLine(Graphics g) {
		// TODO Auto-generated method stub
		g.setColor(Color.GREEN);
		for(int i=0;i<5;i++){
			int x1=new Random().nextInt(WIDTH);
			int y1=new Random().nextInt(HEIGHT);
			int x2=new Random().nextInt(WIDTH);
			int y2=new Random().nextInt(HEIGHT);
			g.drawLine(x1, y1, x2, y2);
		}
	}

3.在繼承了HttpServlet的Servlet的doGet方法(參數有res和req)中添加如下代碼

BufferedImage image=new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Graphics g=image.getGraphics();
setBackground(g);//1.設置背景色
setBorder(g);//2.生成邊界
drawRandomLine(g);//3.畫幾條隨機干擾線

//String num=drawRandomCh((Graphics2D) g);//4.生成幾個隨機漢字,需設置編碼gbk,不然會拋異常
//num=URLEncoder.encode(num,"gbk");

//int num=drawNum((Graphics2D) g);//隨機生成幾個數字

String num=drawNums((Graphics2D) g);//隨機生成幾個數字或字母
//方法1,利用cookie記住驗證碼
Cookie cookie=new Cookie("code",num+"");
cookie.setMaxAge(60*60);
cookie.setPath("/");
res.addCookie(cookie);
//5.圖形寫給瀏覽器
res.setContentType("image/jpeg");
//控制瀏覽器不要緩存
res.setDateHeader("expries", -1);
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Pragma","no-cache");
ImageIO.write(image, "jpg", res.getOutputStream());

4.最後一步-在你想要輸出的jsp中添加以下代碼即可顯示圖片驗證碼,src後跟設置的Servlet的名,onclick實現點擊圖片切換圖片驗證碼

<img alt="" src="/Response" onclick="change(this)">
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章