Spring MVC:圖片驗證碼的生成與返回
阿新 • • 發佈：2019-01-04
效果
程式碼
模型
//分類圖片和儲存圖片數量和路徑
public class ImageGroup {
private String name; //圖片組名稱
private int count;//圖片組數量
private Set<String> paths=new HashSet<String>();//圖片組圖片路徑
public ImageGroup(String name,int count,String...paths){
this.name=name;
this.count=count;
this //生成的圖片組
public class GenerateImageGroup {
private ImageGroup keyGroup;//關鍵圖片組
private List<ImageGroup> unkeyGroups;//其他圖片組
//省略getter和setter方法
}public class BufferedImageWrap {
private boolean key;//是否關鍵圖片
private 生成圖片驗證碼的具體工具類
//用於生成隨機圖片併合並
public class ImageGenerate {
private static final int WIDTH=100;//一張圖片的寬度
private static final int HEADER=30;//標題寬度
private static final int HEIGHT=100;//一張圖片的高度
private static String realPath;
private //用於生成隨機數
public class RandomIntGenerate {
public static Random random=new Random();
public static int getRandomInt(){
return random.nextInt();
}
public static int getRandomInt(int max){
return random.nextInt(max);
}
}
Controller
@Controller
public class VerifyCodeController {
@RequestMapping("/getVerifyCode")
public void getVerifyCode(HttpServletResponse response,HttpSession session){
ImageGenerate.Genreate(response, session);
}
@RequestMapping("/verify")
@ResponseBody
public String verify(String verifyCode,HttpSession session){
String [] coordinates=verifyCode.split(";");
List<Integer> orders=(List<Integer>)session.getAttribute("verifyCode");
if(coordinates.length!=orders.size()){
return "unpass";
}
int order=0;
for(String coordinate:coordinates){
String[] offsets=coordinate.split(",");
order=getSelectedOrder(Integer.parseInt(offsets[0]),Integer.parseInt(offsets[1]));
//System.out.println(order);
if(!orders.contains(order)){
return "unpass";
}
}
//System.out.println(verifyCode);
return "pass";
}
//根據座標確定使用者選擇了哪幾張圖片
public int getSelectedOrder(int x,int y){
int order;
if(x>300){
order=3;
}
else if(x>200){
order=2;
}
else if(x>100){
order=1;
}
else{
order=0;
}
if(y>100){
order+=4;
}
return order;
}
}頁面程式碼
<!--/WEB-INF/pages/index.jsp-->
<html>
<head>
<meta charset="utf-8">
<title>圖片驗證碼實現</title>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="img-wrapper"><img src="getVerifyCode.html"/></div>
<div class="btns-div">
<a href="javascript:void(0);" class="refresh-btn">換一張</a>
<a href="javascript:void(0);" class="submit-btn">驗證</a>
</div>
<script src="js/index.js"></script>
</body>
</html>
//js/index.js
$(function(){
var maxWidth=400;
var maxHeight=200;
var offset=30;
var verifyCode="";
$(".img-wrapper").click(function(e){
var offsetx=e.offsetX;
var offsety=e.offsetY;
if(offsety<30){
return ;
}
var leftVal=offsetx-12;
var topVal=offsety-12;
leftVal=leftVal<0?0:leftVal;
leftVal=leftVal>maxWidth-24?maxWidth-24:leftVal;
topVal=topVal<offset?offset:topVal;
topVal=topVal>maxHeight+offset-24?maxHeight+offset-24:topVal;
var pickDiv=$("<div class='pick-div'><img src='assets/pickon.png'/></div>");
pickDiv.css("position","absolute");
pickDiv.css("left",leftVal+"px");
pickDiv.css("top",topVal+"px");
verifyCode+=leftVal+","+(topVal-offset)+";";
//console.log(verifyCode);
$(this).append(pickDiv);
});
$(".img-wrapper").on("click",".pick-div",function(e){
//console.log(verifyCode);
var target=$(this)[0].offsetLeft+","+$(this)[0].offsetTop+";";
verifyCode=verifyCode.replace(target,"");
$(this).remove();
e.stopPropagation();
});
$(".refresh-btn").click(function(){
verifyCode="";
$(".pick-div").remove();
$(".img-wrapper img").attr("src","getVerifyCode.html?date="+new Date().getTime());
});
$(".submit-btn").click(function(){
verifyCode=verifyCode.substring(0,verifyCode.length-1);
// console.log(verifyCode);
$.ajax({
url:"verify.html",
data:{"verifyCode":verifyCode},
type:"POST",
//dataType:"json",
success:function(data){
alert(data);
$(".refresh-btn").click();
}
});
});
});<!--css/index.css-->
.img-wrapper{position:relative;}
.img-wrapper img{
width:400px;
height:230px;
}
.pick-div{position:absolute;}
.pick-div img{
width:24px;
height:24px;
}
.btns-div{
width:400px;
text-align:center;
}
.btns-div a{
display:inline-block;
line-height:30px;
width:60px;
color:#FFF;
font-size:16px;
text-align:center;
text-decoration:none;
border-radius:1px;
background-color:#0AC516;
}
.btns-div a:hover{background-color:#0AAA16;}
相關配置
<!--springmvc-servlet.xml-->
<mvc:annotation-driven/>
<context:component-scan base-package="com.imageverify.controller"/>
<!-- 配置根檢視 -->
<mvc:view-controller path="/" view-name="index"/>
<!-- 靜態資源配置 -->
<mvc:resources location="/assets/" mapping="/assets/**"/>
<mvc:resources location="/js/" mapping="/js/**"/>
<mvc:resources location="/css/" mapping="/css/**"/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/" />
<property name="suffix" value=".jsp" />
</bean>