设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

Java仿12306图片验证码

2016-7-29 15:41| 发布者: zhangjf| 查看: 502| 评论: 0

摘要: 由于要做一个新项目，所以打算做一个简单的图片验证码。 先说说思路吧：在服务端，从一个文件夹里面找出8张图片，再把8张图片合并成一张大图，在8个小图里面随机生成一个要用户验证的图片分类，如小狗、啤酒等。在前 ...

由于要做一个新项目，所以打算做一个简单的图片验证码。

先说说思路吧：在服务端，从一个文件夹里面找出8张图片，再把8张图片合并成一张大图，在8个小图里面随机生成一个要用户验证的图片分类，如小狗、啤酒等。在前端，访问这个页面时，把图片加载上去，用户在图片上选择提示所需要的图片，当用户点登陆时，根据用户选择的所有坐标判断所选的图片是不是实际上的验证图片。

先放两张效果图:

为了让文件查找比较简单，在图片文件结构上可以这样：

这样方便生成用户要选择的Key图片，和取出8张小图合并成大图。

上代码：这是选择8张图片，并且在每张图片选取时用递归保证选取的图片不会重复。

  2. //选取8个图片
  3. public static List<Object> getEightImages() {
  4. //保存取到的每一个图片的path，保证图片不会重复
  5. List<String> paths = new ArrayList<String>();
  7. File[] finalImages = new File[8];
  8. List<Object> object = new ArrayList<Object>();
  10. //保存tips
  11. String[] tips = new String[8];
  13. for (int i = 0; i < 8; i++) {
  14. //获取随机的二级目录
  15. int dirIndex = getRandom(secondaryDirNumbers);
  16. File secondaryDir = getFiles()[dirIndex];
  18. //随机到的文件夹名称保存到tips中
  19. tips[i] = secondaryDir.getName();
  21. //获取二级图片目录下的文件
  22. File[] images = secondaryDir.listFiles();
  24. int imageIndex = getRandom(imageRandomIndex);
  25. File image = images[imageIndex];
  27. //图片去重
  28. image = dropSameImage(image, paths, tips, i);
  30. paths.add(image.getPath());
  32. finalImages[i] = image;
  34. }
  35. object.add(finalImages);
  36. object.add(tips);
  37. return object;
  38. }
复制代码

在生成这8张图片中，用一个数组保存所有的文件分类。在这个分类里面可以用随机数选取一个分类做为Key分类，就是用户要选择的所有图片。由于数组是有序的，可以遍历数组中的元素，获取每个key分类图片的位置，方便在用户验证时，进行匹配。

  2. //获取位置,返回的是第几个图片，而不是下标，从1开始,集合第一个元素为tip
  3. public static List<Object> getLocation(String[] tips) {
  4. List<Object> locations = new ArrayList<Object>();
  6. //获取Key分类
  7. String tip = getTip(tips);
  8. locations.add(tip);
  10. int length = tips.length;
  11. for (int i = 0; i < length; i++) {
  12. if (tip.equals(tips[i])) {
  14. locations.add(i+1);
  15. }
  16. }
  17. return locations;
  18. }
复制代码

选取了8张图片后，接下来就是合并图片。合并图片可以用到BufferedImage这个类的方法：setRGB()这个方法如果不明白可以看下api文档，上面有详细的说明。

  2. public static void mergeImage(File[] finalImages, HttpServletResponse response) throws IOException {
  4. //读取图片
  5. BufferedImage mergeImage = new BufferedImage(800, 400, BufferedImage.TYPE_INT_BGR);
  7. for (int i = 0; i < 8; i++) {
  8. File image = finalImages[i];
  10. BufferedImage bufferedImage = ImageIO.read(image);
  11. int width = bufferedImage.getWidth();
  12. int height = bufferedImage.getHeight();
  13. //从图片中读取RGB
  14. int[] imageBytes = new int[width*height];
  15. imageBytes = bufferedImage.getRGB(0, 0, width, height, imageBytes, 0, width);
  16. if ( i < 4) {
  17. mergeImage.setRGB(i*200, 0, width, height, imageBytes, 0, width);
  18. } else {
  19. mergeImage.setRGB((i -4 )*200, 200, width, height, imageBytes, 0, width);
  20. }
  22. }
  25. ImageIO.write(mergeImage, "jpg", response.getOutputStream());
  26. //ImageIO.write(mergeImage, "jpg", destImage);
  27. }
复制代码

　　在controller层中，先把key分类保存到session中，为用户选择图片分类做提示和图片验证做判断。然后把图片流输出到response中，就可以生成验证图片了。

  2. response.setContentType("image/jpeg");
  3. response.setHeader("Pragma", "No-cache");
  4. response.setHeader("Cache-Control", "no-cache");
  5. response.setDateHeader("Expires", 0);
  7. List<Object> object = ImageSelectedHelper.getEightImages();
  8. File[] finalImages = (File[]) object.get(0);
  10. String[] tips = (String[]) object.get(1);
  11. //所有key的图片位置,即用户必须要选的图片
  12. List<Object> locations = ImageSelectedHelper.getLocation(tips);
  14. String tip = locations.get(0).toString();
  15. System.out.println(tip);
  16. session.setAttribute("tip", tip);
  17. locations.remove(0);
  19. int length = locations.size();
  20. for (int i = 0; i < length; i++) {
  21. System.out.println("实际Key图片位置:" + locations.get(i));
  22. }
  24. session.setAttribute("locations", locations);
  25. ImageMerge.mergeImage(finalImages, response);
复制代码

　　在jsp中，为用户的点击生成小图片标记。当用户点图片击时，在父div上添加一个子div标签，并且把他定位为relative, 并且设置zIndex，然后再这个div上添加一个img标签，定位为absolute。在用户的点击时，可以获取点击事件，根据点击事件获取点击坐标，然后减去父div的坐标，就可以获取相对坐标。可以根据自己的喜好定坐标原点，这里的坐标原点是第8个图片的右下角。　　

  2. <div><br> <div id="base"><br> <img src="<%=request.getContextPath()%>/identify" style="width: 300px; height: 150px;" onclick="clickImg(event)" id="bigPicture"><br> </div><br> <br> </div><br><br>function clickImg(e) {
  3. var baseDiv = document.getElementById("base");
  4. var topValue = 0;
  5. var leftValue = 0;
  6. var obj = baseDiv;
  7. while (obj) {
  8. leftValue += obj.offsetLeft;
  9. topValue +=obj.offsetTop;
  10. obj = obj.offsetParent;
  11. }
  12. //解决firefox获取不到点击事件的问题
  13. var clickEvent = e ? e : (window.event ? window.event : null);
  15. var clickLeft = clickEvent.clientX + document.body.scrollLeft - document.body.clientLeft - 10;
  16. var clickTop = clickEvent.clientY + document.body.scrollTop - document.body.clientTop - 10;
  17. var divId = "img_" + index++;
  19. var divEle = document.createElement("div");
  21. divEle.setAttribute("id", divId);
  22. divEle.style.position = "relative";
  23. divEle.style.zIndex = index;
  24. divEle.style.width = "20px";
  25. divEle.style.height = "20px";
  26. divEle.style.display = "inline";
  28. divEle.style.top = clickTop - topValue - 150 + 10 + "px";
  29. divEle.style.left = clickLeft - leftValue - 300 + "px";
  31. divEle.setAttribute("onclick", "remove('" + divId + "')");
  32. baseDiv.appendChild(divEle);
  34. var imgEle = document.createElement("img");
  35. imgEle.src = "<%=request.getContextPath()%>/resources/timo.png";
  36. imgEle.style.width = "20px";
  37. imgEle.style.height = "20px";
  38. imgEle.style.top = "0px";
  39. imgEle.style.left = "0px";
  40. imgEle.style.position = "absolute";
  41. imgEle.style.zIndex = index;
  42. divEle.appendChild(imgEle);
  43. }
复制代码

用户选择登录后，服务器端根据用户的选择坐标进行判断

  2. public List<Integer> isPass(String result) {
  4. String[] xyLocations = result.split(",");
  5. //保存用户选择的坐标落在哪些图片上
  6. List<Integer> list = new ArrayList<Integer>();
  7. //每一组坐标
  8. System.out.println("用户选择图片数:"+xyLocations.length);
  9. for (String xyLocation : xyLocations) {
  10. String[] xy = xyLocation.split("\|\|");
  11. int x = Integer.parseInt(xy[0]);
  12. int y = Integer.parseInt(xy[1]);
  14. //8,4图片区间
  15. if ( x > -75 && x <= 0) {
  17. if ( y > -75 && y <= 0) { //8号
  18. list.add(8);
  20. } else if ( y >= -150 && y <= -75 ) { //4号
  21. list.add(4);
  22. }
  23. } else if ( x > -150 && x <= -75) { //7,3图片区间
  25. if ( y > -75 && y <= 0) { //7号
  26. list.add(7);
  28. } else if ( y >= -150 && y <= -75 ) { //3号
  29. list.add(3);
  30. }
  31. } else if ( x > -225 && x <= -150) { //6,2图片区间
  33. if ( y > -75 && y <= 0) { //6号
  34. list.add(6);
  36. } else if ( y >= -150 && y <= -75 ) { //2号
  37. list.add(2);
  38. }
  40. } else if ( x >= -300 && x <= -225) { //5,1图片区间
  42. if ( y > -75 && y <= 0) { //5号
  43. list.add(5);
  45. } else if ( y >= -150 && y <= -75 ) { //1号
  46. list.add(1);
  47. }
  48. } else {
  49. return null;
  50. }
  51. }
  52. return list;
  53. }
复制代码

刷新生成新的图片，由于ajax不支持二进制流，可以自己用原生的xmlHttpRequest对象加html5的blob来完成。

  2. function refresh() {
  3. var url = "<%=request.getContextPath()%>/identify";
  4. var xhr = new XMLHttpRequest();
  5. xhr.open('GET', url, true);
  6. xhr.responseType = "blob";
  7. xhr.onload = function() {
  8. if (this.status == 200) {
  9. var blob = this.response;
  10. //加载成功后释放blob
  11. bigPicture.onload = function(e) {
  12. window.URL.revokeObjectURL(bigPicture.src);
  13. };
  14. bigPicture.src = window.URL.createObjectURL(blob);
  15. }
  16. }
  17. xhr.send();
复制代码

验证码整体代码完成了，还有有一些细节要处理。

以上就是本文的全部内容，希望对大家的学习有所帮助。

收藏 邀请
上一篇：Java模拟栈和队列数据结构的基本示例讲解下一篇：Java对数组实现选择排序算法的实例详解

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-5-6 13:09

Copyright 2015-2025 djqfx

返回顶部