`
234390216
  • 浏览: 10238994 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A5ee55b9-a463-3d09-9c78-0c0cf33198cd
Oracle基础
浏览量:462906
Ad26f909-6440-35a9-b4e9-9aea825bd38e
springMVC介绍
浏览量:1776009
Ce363057-ae4d-3ee1-bb46-e7b51a722a4b
Mybatis简介
浏览量:1398760
Bdeb91ad-cf8a-3fe9-942a-3710073b4000
Spring整合JMS
浏览量:395162
5cbbde67-7cd5-313c-95c2-4185389601e7
Ehcache简介
浏览量:680178
Cc1c0708-ccc2-3d20-ba47-d40e04440682
Cas简介
浏览量:531162
51592fc3-854c-34f4-9eff-cb82d993ab3a
Spring Securi...
浏览量:1185052
23e1c30e-ef8c-3702-aa3c-e83277ffca91
Spring基础知识
浏览量:468851
4af1c81c-eb9d-365f-b759-07685a32156e
Spring Aop介绍
浏览量:151499
2f926891-9e7a-3ce2-a074-3acb2aaf2584
JAXB简介
浏览量:68352
社区版块
存档分类
最新评论

生成验证码并在页面进行显示

    博客分类:
  • jsp
阅读更多

 

 

 

code.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>code.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	$(function() {
    		
    		init();
    	
    		$("[type='button']").click(function() {
    			$.post("servlet/CheckCode",{},function(data) {
    				//注意这里src的写法,data是经过base64编码后的内容
    				$("img").attr("src","data:image/jpeg;base64,"+data);
    			});
    		});
    		
    	});
    	function init() {
    		$.post("servlet/CheckCode",{},function(data) {
    			//其实在第一次运行的时候是可以直接将图片的二进制作为Image的src进行显示的,但是因为后台统一返回的是
    			//经过base64编码过后的内容,所以这里初始显示的时候也是利用base64的方法
   				$("img").attr("src","data:image/jpeg;base64,"+data);
   			});
    	}
    </script>

  </head>
  
  <body>
    <img alt="" width=100 >
    <input type="button" value="换一张"/>
  </body>
</html>

 

Servlet:

mport java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import sun.misc.BASE64Encoder;

import com.tiantian.ext.util.Util;

public class CheckCode extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//直接返回字节流给img标签的src是可以的,如<img src="servlet/CheckCode">,但在之后进行切换的时候
		//使用ajax请求,如果仅仅返回图片的二进制然后把它传给img的src是不能的,目前的方法是把图片的二进制进行base64编码,
		//然后在页面上以下列方式进行显示,<img src="data:image/jpeg;base64,result">,其中的result是经过
		//base64编码后的内容,这样就可以使用后台直接利用图片的二进制进行图片的显示了
		response.setContentType("image/jpeg;charset=utf-8");
		response.addHeader("pragma", "no-cache");  
		response.addHeader("Cache-Control", "no-cache");
		StringBuffer buffer = new StringBuffer();
		for (int i=0;i<4;i++)
			buffer.append(new Random().nextInt(9));
		String code = buffer.toString();
		byte[] bytes = Util.geneCheckCode(code).toByteArray();
		BASE64Encoder encoder = new BASE64Encoder();
		//使用base64进行转码,否则在页面不能直接显示,至少目前我还没有发现方法,可以直接将图片的字节流使用ajax的方法在页面
		//上进行显示
		String result = encoder.encode(bytes);
		response.getWriter().write(result);
	}

}

 

Util类:

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Properties;
import java.util.Random;

import javax.imageio.ImageIO;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;

public class Util {

	private static DefaultKaptcha kaptcha = new DefaultKaptcha();
	//初始化Kaptcha
	static {
		kaptcha.setConfig(new Config(new Properties()));
	}
	
	/**
	 * 利用kaptcha的实现
	 * @param code
	 * @return
	 * @throws IOException
	 */
	public static ByteArrayOutputStream geneCheckCode(String code) throws IOException {
		BufferedImage bufferedImage = kaptcha.createImage(code);
		ByteArrayOutputStream out = new ByteArrayOutputStream();
		ImageIO.write(bufferedImage, "jpg", out);
		return out;
	}
	
	/**
	 * 自己的实现
	 * @param text
	 * @return
	 * @throws IOException
	 */
	public static ByteArrayOutputStream gene(String text) throws IOException {
		char chars[] = text.toCharArray();
		BufferedImage image = new BufferedImage(200, 50, BufferedImage.TYPE_INT_BGR);
		Graphics graphics = image.getGraphics();
		graphics.setColor(Color.red);
		
		for (int i=0;i<chars.length;i++) {
			graphics.setFont(new Font("宋体", Font.BOLD, 35+new Random().nextInt(10)));
			graphics.drawChars(new char[] {chars[i]}, 0, 1, 45*i+10, 40);
		}
		graphics.setColor(new Color(255, 200, 200));
		for (int i=0;i<17;i++) {
			graphics.drawLine(i*12, 0, i*12, 50);
			graphics.drawLine(0, i*3, 200, i*3);
		}
		ByteArrayOutputStream out = new ByteArrayOutputStream();
		ImageIO.write(image, "jpg", out);
		return out;
	}
	
}

 

分享到:
评论

相关推荐

    .net 生成验证码 代码 页面

    4. **在网页中显示验证码**:在ASP.NET网页中,添加一个`&lt;asp:Image&gt;`控件,并设置其`ImageUrl`属性指向生成验证码的网页URL。这样,每次请求该URL时,都会重新生成一个新的验证码。 5. **验证用户输入**:当用户...

    Asp.Net 生成验证码

    在`RegPicShow.aspx`文件中,可能是用于展示验证码的ASP.Net页面,它可能会调用后台代码生成的验证码图片并显示在页面上。通常,这个页面会有一个隐藏的字段用于存储验证码的值,以便在提交表单时进行比较。 验证码...

    SpringMVC生成的验证码图片不显示问题及解决方法

    在本例中,验证码图片生成成功,但是却不显示在页面上。问题的原因可能是由于浏览器的缓存机制,导致验证码图片不被刷新。解决方法是设置浏览器不要缓存该图片,使用response.setHeader()方法设置Pragma、Cache-...

    ajax验证码 验证码ajax 生成中文验证码

    4. **显示验证码**:前端JavaScript接收到响应后,将验证码显示在页面的指定位置,比如一个图片元素或者文本框。 5. **用户输入验证**:用户输入验证码后,前端再次通过Ajax发送用户的输入值到服务器进行验证。 6....

    页面随机验证码生成

    在项目中,"页面登陆随机验证码"可能包含了JSP页面的HTML和JavaScript代码,用于显示和处理用户输入的验证码,以及后台的Java类,负责生成和验证验证码。学习这个项目,你可以了解如何在实际开发中结合前端和后端...

    生成验证码 jsp 图片验证码

    验证码通常包含一串随机生成的字母和数字,显示在一张图片上,用户需要输入看到的文字以证明他们不是计算机程序。这样,只有人类能够完成验证,而机器由于无法识别图片中的文本,因此无法自动完成任务。 在JSP...

    .net 生成 验证码 验证图片

    在.NET框架中,生成验证码是一项常见的安全功能,用于防止自动化的机器人或恶意脚本进行非法操作,如批量注册、刷票等。验证码通常由一串随机的字母和/或数字组成,显示在一张图片上,用户需要正确输入才能通过验证...

    Web动态生成验证码

    5. **响应客户端**:将生成的验证码图像和会话ID发送给客户端,通常是在一个HTML页面中通过标签显示验证码图像,并将会话ID以隐藏表单字段的形式传递。 6. **用户交互**:用户看到验证码后,手动输入到指定的输入框...

    java web笔记之servlet生成验证码

    在Servlet的`doPost`方法中,取出会话中的原始验证码并与用户输入的验证码进行比较。如果两者匹配,验证成功;否则,提示用户重新输入。 六、注意事项 1. 验证码应具有一定的复杂性,但也不能过于复杂,以免用户...

    js生成四位验证码并验证

    - `createCode()`函数负责生成四位随机数的验证码,并将其显示在页面上。 - `validate()`函数用于验证用户输入的验证码是否正确。 #### 四、扩展知识点 - **随机数生成:** - JavaScript中的`Math.random()`...

    随机生成验证码(包括页面和调用代码,语言C#)

    在本项目中,我们关注的是C#语言实现的随机生成验证码的功能,包括生成验证码的页面和调用代码。下面我们将深入探讨验证码的基本原理、C#实现验证码的步骤以及如何在项目中集成和调用这些代码。 首先,验证码的基本...

    vue插件——使用canvas生成图形验证码

    由于我们在生成验证码时保存了图形和字符的信息,因此可以通过比对用户的输入和原始数据来判断是否匹配。如果匹配成功,允许用户继续操作;如果不匹配,提示用户重新输入。 总结一下,这个“vue插件——使用canvas...

    struts2 生成验证码

    本文将详细介绍如何在Struts2项目中生成并显示验证码。 #### 二、核心概念 1. **验证码**:一种用于区分用户是人还是计算机程序的技术手段。 2. **Struts2**:一个开源的Java EE框架,用于构建企业级Web应用程序。 ...

    生成验证码 代码 页面

    在本场景中,我们讨论的是一个能够生成数字和字母混合的随机验证码的网页代码。该代码允许用户自定义验证码的位数,并且可以直接嵌入到项目中,通过IMAGE控件来显示。 验证码的生成过程通常包括以下几个步骤: 1. ...

    ashx生成验证码实现无刷新页面更换验证码

    生成验证码的关键在于随机性和复杂性,以确保难以被计算机程序破解。C#中可以使用`Random`类生成随机数,结合字符集来构建验证码字符串。 3. **图像处理**:生成的验证码需要显示为图像,这涉及到C#中的图像处理...

    Servlet生成图片验证码

    验证码通常是一串随机生成的字符,以图像形式显示,用户需要在输入框中正确输入才能完成验证。 生成图片验证码的步骤大致如下: 1. **创建Servlet**:首先,我们需要创建一个Servlet类,比如`...

    c#生成图形验证码 一图片的形式生成验证码

    6. **保存和显示图像**:验证码图片可以保存为本地文件,也可以直接在Web页面上显示。对于本地保存,我们可以使用`bitmap.Save()`方法;如果要在Web应用中使用,通常会将其转换为Base64字符串。 ```csharp bitmap....

    JSP自动生成彩色验证码

    彩色验证码的实现是在生成验证码的基础上增加了颜色元素,使得验证码更难以被自动化工具识别,增强了安全性。 JSP是一种基于Java的服务器端脚本语言,用于创建动态网页。在本项目中,`code.jsp`是核心页面,它负责...

    jsp随机生成验证码

    // 生成验证码逻辑 String captchaCode = generateCaptchaCode(); session.setAttribute("captcha", captchaCode); // 将验证码绘制为图像并输出 byte[] imageBytes = drawCaptchaImage(captchaCode); ...

    jsp随机验证码生成测试

    在这个验证码实例中,JSP页面将负责生成并显示验证码图像。 在项目中,`checkcode.jsp`是核心的验证码生成页面。它会通过以下步骤生成验证码: 1. **随机生成验证码字符串**:程序会随机选择一定数量的字符(数字...

Global site tag (gtag.js) - Google Analytics