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; } }