溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
1、下面是一個效果展示；
2、先抱怨一下，在博客上面的抄襲真的非常嚴重，為了實現(xiàn)一個圖片滑動驗證，我搜索了挺久的資料，不過內(nèi)容翻來覆去就是同樣的內(nèi)容，千篇一律，作者還各不相同；內(nèi)容相同我就不多說了，畢竟能解決問題就行，然而恰恰相反，這些東西都沒有為我實質(zhì)性地解決問題?？赡軋D片驗證是一個需要前后臺同時交互的功能吧，從業(yè)的人員大部分都是偏向后臺或者偏向前臺的，所以寫出來的博客都不能完整闡述整個流程，下面是我自己實踐完成的內(nèi)容，記錄一下，供各位參閱斧正。
注：由于使用到的控件和工具較多，有許多地方做了省略，這里只做核心流程的記錄。
一、后端圖片裁剪與生成
首先是一個圖片處理工具VerifyImageUtil.class，它主要的作用是生成兩張圖片：一張被扣除了一部分的原始圖片；一張摳出來圖片。兩兩結合，可以組成一張完整的圖片。原始圖片(target目錄)提供了20張，規(guī)格都是590*360的；摳圖需要的模板圖(template目錄)有4張，規(guī)格都是93*360的(圖片等各種資源會在文末給出)。將圖片資源導入到我們項目的靜態(tài)資源路徑下(你也可以通過其他方式存儲它們)，我這邊是Spring Boot的項目，所以就放在resource下的static目錄下了：
下面是 VerifyImageUtil.class
package com.mine.risk.util;
import org.apache.commons.lang.StringUtils;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.text.NumberFormat;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Random;
/**
* 滑塊驗證工具類
* @author : spirit
* @date : Created in 10:57 2019/9/05
*/
public class VerifyImageUtil {
/** 源文件寬度 */
private static final int ORI_WIDTH = 590;
/** 源文件高度 */
private static final int ORI_HEIGHT = 360;
/** 摳圖坐標x */
private static int X;
/** 摳圖坐標y */
private static int Y;
/** 模板圖寬度 */
private static int WIDTH;
/** 模板圖高度 */
private static int HEIGHT;
public static int getX() {
return X;
}
public static int getY() {
return Y;
}
/**
* 根據(jù)模板切圖
* @param templateFile 模板文件
* @param targetFile 目標文件
* @param templateType 模板文件類型
* @param targetType 目標文件類型
* @return 切圖map集合
* @throws Exception 異常
*/
public static Map<String, byte[]> pictureTemplatesCut(File templateFile, File targetFile, String templateType, String targetType) throws Exception {
Map<String, byte[]> pictureMap = new HashMap<>(2);
if (StringUtils.isEmpty(templateType) || StringUtils.isEmpty(targetType)) {
throw new RuntimeException("file type is empty");
}
InputStream targetIs = new FileInputStream(targetFile);
// 模板圖
BufferedImage imageTemplate = ImageIO.read(templateFile);
WIDTH = imageTemplate.getWidth();
HEIGHT = imageTemplate.getHeight();
// 隨機生成摳圖坐標
generateCutoutCoordinates();
// 最終圖像
BufferedImage newImage = new BufferedImage(WIDTH, HEIGHT, imageTemplate.getType());
Graphics2D graphics = newImage.createGraphics();
graphics.setBackground(Color.white);
int bold = 5;
// 獲取感興趣的目標區(qū)域
BufferedImage targetImageNoDeal = getTargetArea(X, Y, WIDTH, HEIGHT, targetIs, targetType);
// 根據(jù)模板圖片摳圖
newImage = dealCutPictureByTemplate(targetImageNoDeal, imageTemplate, newImage);
// 設置“抗鋸齒”的屬性
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics.setStroke(new BasicStroke(bold, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL));
graphics.drawImage(newImage, 0, 0, null);
graphics.dispose();
//新建流。
ByteArrayOutputStream os = new ByteArrayOutputStream();
//利用ImageIO類提供的write方法，將bi以png圖片的數(shù)據(jù)模式寫入流。
ImageIO.write(newImage, "png", os);
byte[] newImages = os.toByteArray();
pictureMap.put("newImage", newImages);
// 源圖生成遮罩
BufferedImage oriImage = ImageIO.read(targetFile);
byte[] oriCopyImages = dealOriPictureByTemplate(oriImage, imageTemplate, X, Y);
pictureMap.put("oriCopyImage", oriCopyImages);
System.out.println("X="+X+";y="+Y);
return pictureMap;
}
/**
* 摳圖后原圖生成
* @param oriImage 原始圖片
* @param templateImage 模板圖片
* @param x 坐標X
* @param y 坐標Y
* @return 添加遮罩層后的原始圖片
* @throws Exception 異常
*/
private static byte[] dealOriPictureByTemplate(BufferedImage oriImage, BufferedImage templateImage, int x,
int y) throws Exception {
// 源文件備份圖像矩陣 支持alpha通道的rgb圖像
BufferedImage oriCopyImage = new BufferedImage(oriImage.getWidth(), oriImage.getHeight(), BufferedImage.TYPE_4BYTE_ABGR);
// 源文件圖像矩陣
int[][] oriImageData = getData(oriImage);
// 模板圖像矩陣
int[][] templateImageData = getData(templateImage);
//copy 源圖做不透明處理
for (int i = 0; i < oriImageData.length; i++) {
for (int j = 0; j < oriImageData[0].length; j++) {
int rgb = oriImage.getRGB(i, j);
int r = (0xff & rgb);
int g = (0xff & (rgb >> 8));
int b = (0xff & (rgb >> 16));
//無透明處理
rgb = r + (g << 8) + (b << 16) + (255 << 24);
oriCopyImage.setRGB(i, j, rgb);
}
}
for (int i = 0; i < templateImageData.length; i++) {
for (int j = 0; j < templateImageData[0].length - 5; j++) {
int rgb = templateImage.getRGB(i, j);
//對源文件備份圖像(x+i,y+j)坐標點進行透明處理
if (rgb != 16777215 && rgb <= 0) {
int rgb_ori = oriCopyImage.getRGB(x + i, y + j);
int r = (0xff & rgb_ori);
int g = (0xff & (rgb_ori >> 8));
int b = (0xff & (rgb_ori >> 16));
rgb_ori = r + (g << 8) + (b << 16) + (150 << 24);
oriCopyImage.setRGB(x + i, y + j, rgb_ori);
} else {
//do nothing
}
}
}
//新建流
ByteArrayOutputStream os = new ByteArrayOutputStream();
//利用ImageIO類提供的write方法，將bi以png圖片的數(shù)據(jù)模式寫入流
ImageIO.write(oriCopyImage, "png", os);
//從流中獲取數(shù)據(jù)數(shù)組
return os.toByteArray();
}
/**
* 根據(jù)模板圖片摳圖
* @param oriImage 原始圖片
* @param templateImage 模板圖片
* @return 扣了圖片之后的原始圖片
*/
private static BufferedImage dealCutPictureByTemplate(BufferedImage oriImage, BufferedImage templateImage,
BufferedImage targetImage) throws Exception {
// 源文件圖像矩陣
int[][] oriImageData = getData(oriImage);
// 模板圖像矩陣
int[][] templateImageData = getData(templateImage);
// 模板圖像寬度
for (int i = 0; i < templateImageData.length; i++) {
// 模板圖片高度
for (int j = 0; j < templateImageData[0].length; j++) {
// 如果模板圖像當前像素點不是白色 copy源文件信息到目標圖片中
int rgb = templateImageData[i][j];
if (rgb != 16777215 && rgb <= 0) {
targetImage.setRGB(i, j, oriImageData[i][j]);
}
}
}
return targetImage;
}
/**
* 獲取目標區(qū)域
* @param x 隨機切圖坐標x軸位置
* @param y 隨機切圖坐標y軸位置
* @param targetWidth 切圖后目標寬度
* @param targetHeight 切圖后目標高度
* @param ois 源文件輸入流
* @return 返回目標區(qū)域
* @throws Exception 異常
*/
private static BufferedImage getTargetArea(int x, int y, int targetWidth, int targetHeight, InputStream ois,
String fileType) throws Exception {
Iterator<ImageReader> imageReaderList = ImageIO.getImageReadersByFormatName(fileType);
ImageReader imageReader = imageReaderList.next();
// 獲取圖片流
ImageInputStream iis = ImageIO.createImageInputStream(ois);
// 輸入源中的圖像將只按順序讀取
imageReader.setInput(iis, true);
ImageReadParam param = imageReader.getDefaultReadParam();
Rectangle rec = new Rectangle(x, y, targetWidth, targetHeight);
param.setSourceRegion(rec);
return imageReader.read(0, param);
}
/**
* 生成圖像矩陣
* @param bufferedImage 圖片流
* @return 圖像矩陣
*/
private static int[][] getData(BufferedImage bufferedImage){
int[][] data = new int[bufferedImage.getWidth()][bufferedImage.getHeight()];
for (int i = 0; i < bufferedImage.getWidth(); i++) {
for (int j = 0; j < bufferedImage.getHeight(); j++) {
data[i][j] = bufferedImage.getRGB(i, j);
}
}
return data;
}
/**
* 隨機生成摳圖坐標
*/
private static void generateCutoutCoordinates() {
Random random = new Random();
// ORI_WIDTH：590 ORI_HEIGHT：360
// WIDTH：93 HEIGHT：360
int widthDifference = ORI_WIDTH - WIDTH;
int heightDifference = ORI_HEIGHT - HEIGHT;
if (widthDifference <= 0) {
X = 5;
} else {
X = random.nextInt(ORI_WIDTH - 3*WIDTH) + 2*WIDTH + 5;
}
if (heightDifference <= 0) {
Y = 5;
} else {
Y = random.nextInt(ORI_HEIGHT - HEIGHT) + 5;
}
NumberFormat numberFormat = NumberFormat.getInstance();
numberFormat.setMaximumFractionDigits(2);
}
}
有了工具類，就可以開始生成圖片內(nèi)容了，我這邊直接在Spring的控制器生成內(nèi)容并返回
@RequestMapping("createImgValidate")
@ResponseBody
public Message createImgValidate(SmsVerificationCodeVo vo){
try {
Integer templateNum = new Random().nextInt(4) + 1;
Integer targetNum = new Random().nextInt(20) + 1;
File templateFile = ResourceUtils.getFile("classpath:static/images/validate/template/"+templateNum+".png");
File targetFile = ResourceUtils.getFile("classpath:static/images/validate/target/"+targetNum+".jpg");
Map<String, byte[]> pictureMap = VerifyImageUtil.pictureTemplatesCut(templateFile, targetFile,
ConstString.IMAGE_TYPE_PNG,ConstString.IMAGE_TYPE_JPG);
// 將生成的偏移位置信息設置到redis中
String key = ConstString.WEB_VALID_IMAGE_PREFIX + vo.getTelephone();
boolean verified = redisUtil.exists(key);
if(verified){
redisUtil.del(key);
}
redisUtil.set(key,(VerifyImageUtil.getX()+67)+"",SmsUtil.VALID_IMAGE_TIMEOUT);
return ResponseUtil.success(pictureMap);
} catch (Exception e) {
e.printStackTrace();
return ResponseUtil.info(ResponseEnum.BUSINESS_ERROR);
}
}
基本的邏輯是從靜態(tài)資源中隨機加載一張target圖片和一張template圖片，放到圖片處理工具中，處理并返回我們需要的兩張圖片，生成圖片以后，就可以直接返回這個Map了，它會以base64的方式返回到瀏覽器端。在這里，偏移的位置信息屬于敏感內(nèi)容，它會參與前臺傳入偏移量的對比校驗，所以我這里存到了redis中，返回的內(nèi)容也就是Map，只不過我用了一個自定義的返回輔助方法(有興趣的人也可以找我要這些輔助工具)。
二、前端展示圖片
首先還是需要在Spring Boot對應的控制器中，加入生成視圖的代碼(我做圖片滑動驗證主要為了在發(fā)送手機驗證碼之前做校驗，所以有一個手機號的參數(shù))。
/**
* 跳轉到圖片驗證界面
* @return 圖片驗證界面
*/
@RequestMapping("imgValidate")
public String toImgValidate(ModelMap map, String telephone){
map.addAttribute("telephone",telephone);
return "component/imageValidate";
}
之后便是我們的HTML頁碼代碼：imageValidate.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>圖片驗證</title>
<link rel="stylesheet" type="text/css" th:href="@{/static/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/fontawesome/css/all.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/css/public.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/css/component/imageValidate.css}" />
</head>
<body>
<div id="container">
<div class="imageDiv">
<img id="validateImage" src=""/>
<img id="slideImage" src=""/>
</div>
<div class="resultDiv">
<button class="btn btn-success" onclick="exchange();"><i class="fas fa-redo"></i> 換一組</button>
<span id="operateResult"></span>
</div>
<div>
<div id="sliderOuter">
<div id="dragDiv">拖動滑塊完成拼圖</div>
<div id="sliderInner">
<i class="fas fa-angle-double-right"></i>
<div class="coverIcon"></div>
</div>
</div>
</div>
</div>
</body>
<script th:inline="javascript">
var telephone = [[${telephone}]];
</script>
<script type="text/javascript" th:src="@{/static/js/jquery-3.4.0.min.js}" ></script>
<script type="text/javascript" th:src="@{/static/js/component/imageValidate.js}" ></script>
</html>
然后是對應的JS邏輯代碼：imageValidate.js。之前說過后臺返回的圖片是轉成base64了的，所以我們在生成圖片的時候，直接在img標簽的src內(nèi)容前加入data:image/png;base64,即可，注意又一個英文逗號。
var left = 0;
$(function(){
// 初始化圖片驗證碼
initImageValidate();
/* 初始化按鈕拖動事件 */
// 鼠標點擊事件
$("#sliderInner").mousedown(function(){
// 鼠標移動事件
document.onmousemove = function(ev) {
left = ev.clientX;
if(left >= 67 && left <= 563){
$("#sliderInner").css("left",(left-67)+"px");
$("#slideImage").css("left",(left-67)+"px");
}
};
// 鼠標松開事件
document.onmouseup=function(){
document.onmousemove=null;
checkImageValidate();
};
});
});
function initImageValidate(){
$.ajax({
async : false,
type : "POST",
url : "/common/createImgValidate",
dataType: "json",
data:{
telephone:telephone
},
success : function(data) {
if(data.status < 400){
// 設置圖片的src屬性
$("#validateImage").attr("src", "data:image/png;base64,"+data.data.oriCopyImage);
$("#slideImage").attr("src", "data:image/png;base64,"+data.data.newImage);
}else{
layer.open({
icon:2,
title: "溫馨提示",
content: data.info
});
}
},
error : function() {}
});
}
function exchange(){
initImageValidate();
}
// 校驗
function checkImageValidate(){
$.ajax({
async : false,
type : "POST",
url : "/common/checkImgValidate",
dataType: "json",
data:{
telephone:telephone,
offsetHorizontal:left
},
success : function(data) {
if(data.status < 400){
$("#operateResult").html(data.info).css("color","#28a745");
// 校驗通過，調(diào)用發(fā)送短信的函數(shù)
parent.getValidateCode(left);
}else{
$("#operateResult").html(data.info).css("color","#dc3545");
// 驗證未通過，將按鈕和拼圖恢復至原位置
$("#sliderInner").animate({"left":"0px"},200);
$("#slideImage").animate({"left":"0px"},200);
}
},
error : function() {}
});
}
最后是css樣式代碼：imageValidate.css
body{
overflow: hidden;
}
#container{
width: 100%;
}
.fontDiv{
margin: 16px 0;
}
.dragFont{
font-size: 16px;
color: dodgerblue;
}
.imageDiv{
width: 590px;
height: 360px;
margin: 20px auto 0 auto;
position: relative;
}
.resultDiv{
margin: 10px 20px;
}
#validateImage{
border-radius: 4px;
}
#slideImage{
position: absolute;
top: 5px;
left: 0;
}
#sliderOuter{
width: 590px;
height: 40px;
margin: 12px auto;
border-radius: 20px;
box-shadow: 0 0 10px 5px darkgrey;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#dragDiv{
width: 100%;
height: 40px;
position: absolute;
font-size: 16px;
color: dodgerblue;
text-align: center;
line-height: 40px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#sliderInner{
width: 94px;
height: 40px;
border-radius: 20px;
font-size: 2rem;
background-color: #28a745;
cursor: pointer;
position: absolute;
left: 0;
}
#sliderInner i{
position: relative;
top: -2px;
left: 36px;
color: white;
}
.coverIcon{
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
資源包下載：Java圖片滑動驗證
更多關于驗證碼的文章請點擊查看：《java驗證碼》
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
