js+java實現(xiàn)登錄滑動圖片驗證
更新時間：2020年09月29日 15:53:23 作者：YongHon
這篇文章主要為大家詳細介紹了js+java實現(xiàn)登錄滑動圖片驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最新需要公司要求在不改變原來的登錄邏輯的情況下，將原來的驗證碼登錄的形式改成滑動圖片的形式！下面是做出來的效果：
實現(xiàn)思路：所有的圖片數(shù)據(jù)，驗證全部由后端來做。前端調(diào)用接口，后端會返回兩張經(jīng)過base64加密的圖片信息，分別是背景圖片和滑塊圖片，前端滑動滑塊以后將X方向的滑動距離傳回后端做驗證，驗證成功以后再做后續(xù)的登錄邏輯驗證，以下是完整的過程：
獲取背景圖，我這邊是在FTP上放了10張圖片，隨機獲取一張。
@LogAnnotation(description = "web獲取滑動圖片信息")
@ApiOperation(value = "web獲取滑動圖片信息", httpMethod = "POST", response = Result.class, notes = "")
@RequiresPermissions(value = "code/picture/msg")
@RequestMapping(value = "code/picture/msg", method = RequestMethod.POST)
@ResponseBody
public Response getPictureCode(HttpServletRequest request) {
Map<String, Object> pictureMap = new HashMap<>();
try {
//隨機獲取需要切成的圖片形狀
Integer templateNum = new Random().nextInt(10) + 1;
String randomStr = String.valueOf(templateNum);
if(templateNum < 10){
randomStr = "0"+randomStr;
}
InputStream tempInputStream = FileUtils.downloadFtpFile(Constant.POCTURE_CHECK_PATH,randomStr+".jpg");
//根據(jù)源圖片和摳圖形狀生成新的圖片信息以流的形式返回到前端
pictureMap = VerifyImageUtil.getVerifyImage(tempInputStream);
//將剪裁好了以后的圖片信息以當前時間戳為key，存入redis（這一步是為了對圖片信息做過期處理，根據(jù)自己需求做）
String tempTime = String.valueOf(System.currentTimeMillis());
redisUtils.hset(Constant.REDIS_LOGIN_PICTURE_CODE, tempTime,pictureMap.get("locationX").toString(),60);
pictureMap.put("tempTime",tempTime);
//移出隨機生成的摳圖位置坐標，不返回給前端
pictureMap.remove("locationX");
return new ObjectResponse<Map<String, Object>>(pictureMap);
}catch(Exception e){
logger.error("code/picture/msg", e);
return new FailedResponse();
}
}
FTP下載方法代碼
public static FTPClient ftpLogin(){
String ip = p.getProperty("ftp的ip");
String username = p.getProperty("ftp的user");
String password = p.getProperty("ftp的pwd");
int ftpPort = Integer.parseInt(p.getProperty("ftp的port"));
FTPClient ftpClient = new FTPClient();
try {
ftpClient.connect(ip , ftpPort );// 連接FTP服務(wù)器
ftpClient.login(username , password );// 登陸FTP服務(wù)器
if (!FTPReply.isPositiveCompletion(ftpClient.getReplyCode())) {
ftpClient.disconnect();
}
} catch (SocketException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return ftpClient;
}
public static InputStream downloadFtpFile(String ftpPath, String fileName) {
FTPClient ftpClient = ftpLogin();
try {
ftpClient.setControlEncoding("UTF-8"); // 中文支持
ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE);
ftpClient.enterLocalPassiveMode();
ftpClient.changeWorkingDirectory(ftpPath);
InputStream inputStream = ftpClient.retrieveFileStream(new String(fileName.getBytes("UTF-8"), "ISO-8859-1"));
//ftpClient.completePendingCommand();
return inputStream;
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
ftpClient.logout();
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}
摳圖工具類VerifyImageUtil
public class VerifyImageUtil {
/**
* 源文件寬度
*/
private static int ORI_WIDTH = 296;
/**
* 源文件高度
*/
private static int ORI_HEIGHT = 182;
/**
* 模板圖寬度
*/
private static int CUT_WIDTH = 50;
/**
* 模板圖高度
*/
private static int CUT_HEIGHT = 50;
/**
* 摳圖凸起圓心
*/
private static int circleR = 6;
/**
* 摳圖內(nèi)部矩形填充大小
*/
private static int RECTANGLE_PADDING = 6;
/**
* 摳圖的邊框?qū)挾?
*/
private static int SLIDER_IMG_OUT_PADDING = 1;
/**
* 根據(jù)傳入的路徑生成指定驗證碼圖片
*
* @param filePath
* @return
* @throws IOException
*/
public static Map<String, Object> getVerifyImage(InputStream filePath) throws IOException {
BufferedImage srcImage = ImageIO.read(filePath);
int locationX = CUT_WIDTH + new Random().nextInt(srcImage.getWidth() - CUT_WIDTH * 2);
int locationY = CUT_HEIGHT + new Random().nextInt(srcImage.getHeight() - CUT_HEIGHT) / 2;
BufferedImage markImage = new BufferedImage(CUT_WIDTH,CUT_HEIGHT,BufferedImage.TYPE_4BYTE_ABGR);
int[][] data = getBlockData();
cutImgByTemplate(srcImage, markImage, data, locationX, locationY);
Map<String, Object> resultMap = new HashMap<>();
//放入背景圖的加密信息
resultMap.put("srcImage",getImageBASE64(srcImage));
//放入滑塊圖的加密信息
resultMap.put("markImage",getImageBASE64(markImage));
//放入摳圖位置的X方向的信息，用于驗證滑塊位置是否正確
resultMap.put("locationX",locationX);
//放入摳圖位置的Y方向的信息，用于前端控制定位信息
resultMap.put("locationY",locationY);
return resultMap;
}
/**
* 生成隨機滑塊形狀
* <p>
* 0 透明像素
* 1 滑塊像素
* 2 陰影像素
* @return int[][]
*/
private static int[][] getBlockData() {
int[][] data = new int[CUT_WIDTH][CUT_HEIGHT];
Random random = new Random();
//(x-a)²+(y-b)²=r²
//x中心位置左右5像素隨機
double x1 = RECTANGLE_PADDING + (CUT_WIDTH - 2 * RECTANGLE_PADDING) / 2.0 - 5 + random.nextInt(10);
//y 矩形上邊界半徑-1像素移動
double y1_top = RECTANGLE_PADDING - random.nextInt(3);
double y1_bottom = CUT_HEIGHT - RECTANGLE_PADDING + random.nextInt(3);
double y1 = random.nextInt(2) == 1 ? y1_top : y1_bottom;
double x2_right = CUT_WIDTH - RECTANGLE_PADDING - circleR + random.nextInt(2 * circleR - 4);
double x2_left = RECTANGLE_PADDING + circleR - 2 - random.nextInt(2 * circleR - 4);
double x2 = random.nextInt(2) == 1 ? x2_right : x2_left;
double y2 = RECTANGLE_PADDING + (CUT_HEIGHT - 2 * RECTANGLE_PADDING) / 2.0 - 4 + random.nextInt(10);
double po = Math.pow(circleR, 2);
for (int i = 0; i < CUT_WIDTH; i++) {
for (int j = 0; j < CUT_HEIGHT; j++) {
//矩形區(qū)域
boolean fill;
if ((i >= RECTANGLE_PADDING && i < CUT_WIDTH - RECTANGLE_PADDING)
&& (j >= RECTANGLE_PADDING && j < CUT_HEIGHT - RECTANGLE_PADDING)) {
data[i][j] = 1;
fill = true;
} else {
data[i][j] = 0;
fill = false;
}
//凸出區(qū)域
double d3 = Math.pow(i - x1, 2) + Math.pow(j - y1, 2);
if (d3 < po) {
data[i][j] = 1;
} else {
if (!fill) {
data[i][j] = 0;
}
}
//凹進區(qū)域
double d4 = Math.pow(i - x2, 2) + Math.pow(j - y2, 2);
if (d4 < po) {
data[i][j] = 0;
}
}
}
//邊界陰影
for (int i = 0; i < CUT_WIDTH; i++) {
for (int j = 0; j < CUT_HEIGHT; j++) {
//四個正方形邊角處理
for (int k = 1; k <= SLIDER_IMG_OUT_PADDING; k++) {
//左上、右上
if (i >= RECTANGLE_PADDING - k && i < RECTANGLE_PADDING
&& ((j >= RECTANGLE_PADDING - k && j < RECTANGLE_PADDING)
|| (j >= CUT_HEIGHT - RECTANGLE_PADDING - k && j < CUT_HEIGHT - RECTANGLE_PADDING +1))) {
data[i][j] = 2;
}
//左下、右下
if (i >= CUT_WIDTH - RECTANGLE_PADDING + k - 1 && i < CUT_WIDTH - RECTANGLE_PADDING + 1) {
for (int n = 1; n <= SLIDER_IMG_OUT_PADDING; n++) {
if (((j >= RECTANGLE_PADDING - n && j < RECTANGLE_PADDING)
|| (j >= CUT_HEIGHT - RECTANGLE_PADDING - n && j <= CUT_HEIGHT - RECTANGLE_PADDING ))) {
data[i][j] = 2;
}
}
}
}
if (data[i][j] == 1 && j - SLIDER_IMG_OUT_PADDING > 0 && data[i][j - SLIDER_IMG_OUT_PADDING] == 0) {
data[i][j - SLIDER_IMG_OUT_PADDING] = 2;
}
if (data[i][j] == 1 && j + SLIDER_IMG_OUT_PADDING > 0 && j + SLIDER_IMG_OUT_PADDING < CUT_HEIGHT && data[i][j + SLIDER_IMG_OUT_PADDING] == 0) {
data[i][j + SLIDER_IMG_OUT_PADDING] = 2;
}
if (data[i][j] == 1 && i - SLIDER_IMG_OUT_PADDING > 0 && data[i - SLIDER_IMG_OUT_PADDING][j] == 0) {
data[i - SLIDER_IMG_OUT_PADDING][j] = 2;
}
if (data[i][j] == 1 && i + SLIDER_IMG_OUT_PADDING > 0 && i + SLIDER_IMG_OUT_PADDING < CUT_WIDTH && data[i + SLIDER_IMG_OUT_PADDING][j] == 0) {
data[i + SLIDER_IMG_OUT_PADDING][j] = 2;
}
}
}
return data;
}
/**
* 裁剪區(qū)塊
* 根據(jù)生成的滑塊形狀，對原圖和裁剪塊進行變色處理
* @param oriImage 原圖
* @param targetImage 裁剪圖
* @param blockImage 滑塊
* @param x 裁剪點x
* @param y 裁剪點y
*/
private static void cutImgByTemplate(BufferedImage oriImage, BufferedImage targetImage, int[][] blockImage, int x, int y) {
for (int i = 0; i < CUT_WIDTH; i++) {
for (int j = 0; j < CUT_HEIGHT; j++) {
int _x = x + i;
int _y = y + j;
int rgbFlg = blockImage[i][j];
int rgb_ori = oriImage.getRGB(_x, _y);
// 原圖中對應(yīng)位置變色處理
if (rgbFlg == 1) {
//摳圖上復(fù)制對應(yīng)顏色值
targetImage.setRGB(i,j, rgb_ori);
//原圖對應(yīng)位置顏色變化
oriImage.setRGB(_x, _y, rgb_ori & 0x363636);
} else if (rgbFlg == 2) {
targetImage.setRGB(i, j, Color.WHITE.getRGB());
oriImage.setRGB(_x, _y, Color.GRAY.getRGB());
}else if(rgbFlg == 0){
//int alpha = 0;
targetImage.setRGB(i, j, rgb_ori & 0x00ffffff);
}
}
}
}
/**
* 隨機獲取一張圖片對象
* @param path
* @return
* @throws IOException
*/
public static BufferedImage getRandomImage(String path) throws IOException {
File files = new File(path);
File[] fileList = files.listFiles();
List<String> fileNameList = new ArrayList<>();
if (fileList!=null && fileList.length!=0){
for (File tempFile:fileList){
if (tempFile.isFile() && tempFile.getName().endsWith(".jpg")){
fileNameList.add(tempFile.getAbsolutePath().trim());
}
}
}
Random random = new Random();
File imageFile = new File(fileNameList.get(random.nextInt(fileNameList.size())));
return ImageIO.read(imageFile);
}
/**
* 將IMG輸出為文件
* @param image
* @param file
* @throws Exception
*/
public static void writeImg(BufferedImage image, String file) throws Exception {
byte[] imagedata = null;
ByteArrayOutputStream bao=new ByteArrayOutputStream();
ImageIO.write(image,"png",bao);
imagedata = bao.toByteArray();
FileOutputStream out = new FileOutputStream(new File(file));
out.write(imagedata);
out.close();
}
/**
* 將圖片轉(zhuǎn)換為BASE64
* @param image
* @return
* @throws IOException
*/
public static String getImageBASE64(BufferedImage image) throws IOException {
ByteArrayOutputStream out = new ByteArrayOutputStream();
ImageIO.write(image,"png",out);
//轉(zhuǎn)成byte數(shù)組
byte[] bytes = out.toByteArray();
BASE64Encoder encoder = new BASE64Encoder();
//生成BASE64編碼
return encoder.encode(bytes);
}
/**
* 將BASE64字符串轉(zhuǎn)換為圖片
* @param base64String
* @return
*/
public static BufferedImage base64StringToImage(String base64String) {
try {
BASE64Decoder decoder=new BASE64Decoder();
byte[] bytes1 = decoder.decodeBuffer(base64String);
ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
return ImageIO.read(bais);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
前端收到請求成功返回信息以后，對數(shù)據(jù)做解析
// 設(shè)置圖片的src屬性
$("#背景圖的ID").attr("src", "data:image/png;base64," + result.datas.srcImage);
$("#滑塊圖的ID").attr("src", "data:image/png;base64," + result.datas.markImage);
$("#滑塊圖的ID").css("top", result.datas.locationY);
/* 初始化按鈕拖動事件 */
// 鼠標點擊事件
$("#滑塊拖動條").mousedown(function(e) {
e = e || window.event;
// 鼠標在滑塊按下切換滑塊背景
var left = e.pageX;//記錄鼠標按下時的坐標 X軸值
var num = 0;
// 鼠標移動事件
document.onmousemove = function(e) {
var nowLeft = e.pageX;
num = nowLeft-left;
if(num <= 0){
num = 0;
}else if(num >= 251){
num= 251;
}
$("#滑塊拖動條").css("width", (42+num) + "px");
$("#滑塊拖動條圖片").css("left", (num) + "px");
$("#滑塊拖動條").css("background-color", "#3c55ff");
};
// 鼠標松開事件
document.onmouseup = function(e) {
left = 0;
document.onmousemove = null;
document.onmouseup = null;
//松開以后進行后續(xù)的驗證......
};
});
以上就是完整的過程了.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家深入的介紹了Swift中Substring和String的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
這篇文章主要介紹了Java集合及LIst接口，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了Java中的控制語句,循環(huán)等語句是Java編程中流程控制的基礎(chǔ),需要的朋友可以參考下，希望能夠給你帶來幫助2021-11-11
Windows下使用Graalvm將Springboot應(yīng)用編譯成exe大大提高啟動和運行效率(推薦)
這篇文章主要介紹了Windows下使用Graalvm將Springboot應(yīng)用編譯成exe大大提高啟動和運行效率,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Java中的Vector詳細解讀,Vector是實現(xiàn)了List接口的子類,其底層是一個對象數(shù)組,維護了一個elementData數(shù)組,是線程安全的,Vector類的方法帶有synchronized關(guān)鍵字,在開發(fā)中考慮線程安全中使用Vector,需要的朋友可以參考下2023-09-09
Springboot支持Emoji表情的實現(xiàn)方法
本文主要介紹了Springboot 支持Emoji 表情，本篇的實現(xiàn)方式是僅需后端處理，具有一定的參考價值，需要的朋友可以參考一下。2021-07-07
這篇文章給大家介紹了Spring從入門到源碼之IOC基本用法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-01-01
hello ！大家好！今天的主題就是：泛型。在使用集合類時，大家就已經(jīng)接觸到泛型了，那就是每個集合類后面的尖括號<>，這樣一對尖括號，在java中就稱為泛型。那么泛型這一個點，我們又該知道多少呢？我們往下看2021-11-11
Java的帶GUI界面猜數(shù)字游戲的實現(xiàn)示例
這篇文章主要介紹了Java的帶GUI界面猜數(shù)字游戲的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
我們在拿到舊項目的時候,經(jīng)常會遇到一種情況,就是這個項目的maven中依賴了一個本地的jar包,這種情況就需要引入這個jar包,所以本文給大家介紹了IDEA在Maven項目中使用本地jar包的方法,需要的朋友可以參考下2024-04-04