热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Java仿12306图片验证码

这篇文章主要为大家详细介绍了Java仿12306的图片验证码的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

先放两张效果图:

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

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

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

//选取8个图片
public static List getEightImages() {
 //保存取到的每一个图片的path,保证图片不会重复
 List paths = new ArrayList();
 
 File[] finalImages = new File[8];
 List object = new ArrayList();
 
 //保存tips
 String[] tips = new String[8];
 
 for (int i = 0; i <8; i++) {
 //获取随机的二级目录
 int dirIndex = getRandom(secondaryDirNumbers);
 File secOndaryDir= getFiles()[dirIndex];
  
 //随机到的文件夹名称保存到tips中
 tips[i] = secondaryDir.getName();
  
 //获取二级图片目录下的文件
 File[] images = secondaryDir.listFiles();
  
 int imageIndex = getRandom(imageRandomIndex);
 File image = images[imageIndex];
  
 //图片去重
 image = dropSameImage(image, paths, tips, i); 
  
 paths.add(image.getPath());
 
 finalImages[i] = image;
  
 }
 object.add(finalImages);
 object.add(tips);
 return object;
} 

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

//获取位置,返回的是第几个图片,而不是下标,从1开始,集合第一个元素为tip
 public static List getLocation(String[] tips) {
 List locatiOns= new ArrayList();
 
 //获取Key分类
 String tip = getTip(tips);
 locations.add(tip);
  
 int length = tips.length;
 for (int i = 0; i 

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

public static void mergeImage(File[] finalImages, HttpServletResponse response) throws IOException {
   
 //读取图片
 BufferedImage mergeImage = new BufferedImage(800, 400, BufferedImage.TYPE_INT_BGR);
  
 for (int i = 0; i <8; i++) {
  File image = finalImages[i];
  
  BufferedImage bufferedImage = ImageIO.read(image);
  int width = bufferedImage.getWidth();
  int height = bufferedImage.getHeight();
  //从图片中读取RGB
  int[] imageBytes = new int[width*height];
  imageBytes = bufferedImage.getRGB(0, 0, width, height, imageBytes, 0, width);
  if ( i <4) {
  mergeImage.setRGB(i*200, 0, width, height, imageBytes, 0, width);
  } else {
  mergeImage.setRGB((i -4 )*200, 200, width, height, imageBytes, 0, width);
  }  
  
 }
 
 
 ImageIO.write(mergeImage, "jpg", response.getOutputStream());
 //ImageIO.write(mergeImage, "jpg", destImage);
 }

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

response.setContentType("image/jpeg"); 
 response.setHeader("Pragma", "No-cache"); 
 response.setHeader("Cache-Control", "no-cache"); 
 response.setDateHeader("Expires", 0);
 
 List object = ImageSelectedHelper.getEightImages();
 File[] finalImages = (File[]) object.get(0);
 
 String[] tips = (String[]) object.get(1);
 //所有key的图片位置,即用户必须要选的图片
 List locatiOns= ImageSelectedHelper.getLocation(tips);
 
 String tip = locations.get(0).toString();
 System.out.println(tip);
 session.setAttribute("tip", tip);
 locations.remove(0);
 
 int length = locations.size();
 for (int i = 0; i 

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








function clickImg(e) { var baseDiv = document.getElementById("base"); var topValue = 0; var leftValue = 0; var obj = baseDiv; while (obj) { leftValue += obj.offsetLeft; topValue +=obj.offsetTop; obj = obj.offsetParent; } //解决firefox获取不到点击事件的问题 var clickEvent = e &#63; e : (window.event &#63; window.event : null); var clickLeft = clickEvent.clientX + document.body.scrollLeft - document.body.clientLeft - 10; var clickTop = clickEvent.clientY + document.body.scrollTop - document.body.clientTop - 10; var divId = "img_" + index++; var divEle = document.createElement("div"); divEle.setAttribute("id", divId); divEle.style.position = "relative"; divEle.style.zIndex = index; divEle.style.width = "20px"; divEle.style.height = "20px"; divEle.style.display = "inline"; divEle.style.top = clickTop - topValue - 150 + 10 + "px"; divEle.style.left = clickLeft - leftValue - 300 + "px"; divEle.setAttribute("onclick", "remove('" + divId + "')"); baseDiv.appendChild(divEle); var imgEle = document.createElement("img"); imgEle.src = "<%=request.getContextPath()%>/resources/timo.png"; imgEle.style.width = "20px"; imgEle.style.height = "20px"; imgEle.style.top = "0px"; imgEle.style.left = "0px"; imgEle.style.position = "absolute"; imgEle.style.zIndex = index; divEle.appendChild(imgEle); }

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

public List isPass(String result) {
  
 String[] xyLocatiOns= result.split(",");
 //保存用户选择的坐标落在哪些图片上
 List list = new ArrayList();
 //每一组坐标
 System.out.println("用户选择图片数:"+xyLocations.length);
 for (String xyLocation : xyLocations) {
  String[] xy = xyLocation.split("\\|\\|");
  int x = Integer.parseInt(xy[0]);
  int y = Integer.parseInt(xy[1]);
  
  //8,4图片区间
  if ( x > -75 && x <= 0) {
 
  if ( y > -75 && y <= 0) { //8号
   list.add(8);
 
  } else if ( y >= -150 && y <= -75 ) { //4号
   list.add(4);
  }
  } else if ( x > -150 && x <= -75) { //7,3图片区间
   
  if ( y > -75 && y <= 0) { //7号
   list.add(7);
 
  } else if ( y >= -150 && y <= -75 ) { //3号
   list.add(3);
  }
  } else if ( x > -225 && x <= -150) { //6,2图片区间
   
  if ( y > -75 && y <= 0) { //6号
   list.add(6);
 
  } else if ( y >= -150 && y <= -75 ) { //2号
   list.add(2);
  }
   
  } else if ( x >= -300 && x <= -225) { //5,1图片区间
   
  if ( y > -75 && y <= 0) { //5号
   list.add(5);
 
  } else if ( y >= -150 && y <= -75 ) { //1号
   list.add(1);
  }
  } else {
  return null;
  }
 }
 return list;
 }

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

function refresh() {
 var url = "<%=request.getContextPath()%>/identify";
 var xhr = new XMLHttpRequest();
 xhr.open('GET', url, true);
 xhr.respOnseType= "blob";
 xhr.Onload= function() {
 if (this.status == 200) {
  var blob = this.response;  
  //加载成功后释放blob
  bigPicture.Onload= function(e) {
  window.URL.revokeObjectURL(bigPicture.src);
  };
  bigPicture.src = window.URL.createObjectURL(blob);
 }
 }
 xhr.send();

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

更多关于验证码的文章请点击查看:《java验证码》

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


推荐阅读
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • 本文介绍了计算机网络的定义和通信流程,包括客户端编译文件、二进制转换、三层路由设备等。同时,还介绍了计算机网络中常用的关键词,如MAC地址和IP地址。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
author-avatar
exit佑
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有