正文
生成一個圖片驗證碼，用戶在前端拖動後，校驗圖片是否能與摳圖吻合。主要生成以下四個參數：
@Data
@AllArgsConstructor
@NoArgsConstructor
public class VerifyImage {
/**
* 被摳圖後處理過的原圖
*/
private String srcImage;
/**
* 摳圖塊
*/
private String markImage;
/**
* 扣下圖的X軸座標
*/
private int locationX;
/**
* 扣下圖的Y軸座標
*/
private int locationY;
}
srcImage與markImage，都是以BASE64形式返給前端。
locationX與locationY，是校驗用戶拖動後，前端傳過來的X軸與Y軸是否能在一定的誤差內能匹配上
代碼
package cn.xyz.commons.utils;
import cn.xyz.commons.vo.JSONMessage;
import cn.xyz.commons.vo.VerifyImage;
import cn.xyz.mianshi.utils.SKBeanUtils;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/**
* 檢驗圖片驗證碼
*
* @author huangjunhao
* @date 2019/06/13 10:26
**/
public class VerifyImageUtil {
/**
* 源文件寬度
*/
private static int ORI_WIDTH = 300;
/**
* 源文件高度
*/
private static int ORI_HEIGHT = 150;
/**
* 模板圖寬度
*/
private static int CUT_WIDTH = 50;
/**
* 模板圖高度
*/
private static int CUT_HEIGHT = 50;
/**
* 摳圖凸起圓心
*/
private static int circleR = 5;
/**
* 摳圖內部矩形填充大小
*/
private static int RECTANGLE_PADDING = 8;
/**
* 摳圖的邊框寬度
*/
private static int SLIDER_IMG_OUT_PADDING = 1;
/**
* x軸圖片誤差
*/
private static int X_SIZE = 3;
/**
* y軸圖片誤差
*/
private static int Y_SIZE = 3;
/**
* 根據傳入的路徑生成指定驗證碼圖片
*
* @param filePath
* @return
* @throws IOException
*/
public static VerifyImage getVerifyImage(String filePath) throws IOException {
File file = new File(filePath);
BufferedImage srcImage = ImageIO.read(file);
int locationX = CUT_WIDTH + new Random().nextInt(srcImage.getWidth() - CUT_WIDTH * 3);
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);
return new VerifyImage(getImageBase64(srcImage),getImageBase64(markImage),locationX,locationY);
}
/**
* 校驗並返回驗證結果
*
* @param locationX 用戶滑動的X軸
* @param locationY 用戶滑動的Y軸
* @param userId userId
* @return 返回信息
*/
public static JSONMessage imgVerify(Integer locationX, Integer locationY, Integer userId) {
if (EmptyUtils.isNotEmpty(locationX) || EmptyUtils.isNotEmpty(locationY) || EmptyUtils.isNotEmpty(userId)) {
//獲取用戶之前生成的圖片驗證碼
VerifyImage data = SKBeanUtils.getRedisService().getImgVerify(userId);
if(EmptyUtils.isEmpty(data)){
return JSONMessage.failure("用戶尚未獲取驗證碼");
}
// 用戶傳進來的圖片
if (locationX <= 0 || locationY <= 0) {
return JSONMessage.failure("校驗錯誤");
}
// 緩存中存的圖片
int dataLocationX = data.getLocationX();
int dataLocationY = data.getLocationY();
//x軸和y軸的座標相差不能超過3px
int xl = dataLocationX - locationX;
int yl = dataLocationY - locationY;
if (Math.abs(xl) >= X_SIZE|| Math.abs(yl) >= Y_SIZE) {
return JSONMessage.failure("校驗錯誤");
}
//校驗成功後刪除用戶之前生成的圖片驗證碼
SKBeanUtils.getRedisService().delImgVerify(userId);
return JSONMessage.success("success");
}
return JSONMessage.failure("校驗錯誤");
}
/**
* 生成隨機滑塊形狀
* <p>
* 0 透明像素
* 1 滑塊像素
* 2 陰影像素
* @return int[][]
*/
private static int[][] getBlockData() {
int[][] data = new int[CUT_WIDTH][CUT_HEIGHT];
Random random = new Random();
//x中心位置左右5像素隨機
double x1 = RECTANGLE_PADDING + (CUT_WIDTH - 2 * RECTANGLE_PADDING) / 2.0 - 5 + random.nextInt(10);
//y 矩形上邊界半徑-1像素移動
double y1Top = RECTANGLE_PADDING - random.nextInt(3);
double y1Bottom = CUT_HEIGHT - RECTANGLE_PADDING + random.nextInt(3);
double y1 = random.nextInt(2) == 1 ? y1Top : y1Bottom;
double x2Right = CUT_WIDTH - RECTANGLE_PADDING - circleR + random.nextInt(2 * circleR - 4);
double x2Left = RECTANGLE_PADDING + circleR - 2 - random.nextInt(2 * circleR - 4);
double x2 = random.nextInt(2) == 1 ? x2Right : x2Left;
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++) {
//矩形區域
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;
}
//凸出區域
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;
}
}
//凹進區域
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;
}
/**
* 裁剪區塊
* 根據生成的滑塊形狀，對原圖和裁剪塊進行變色處理
* @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 xl = x + i;
int yl = y + j;
int rgbFlg = blockImage[i][j];
int rgbori = oriImage.getRGB(xl, yl);
// 原圖中對應位置變色處理
if (rgbFlg == 1) {
//摳圖上覆制對應顏色值
targetImage.setRGB(i,j, rgbori);
//原圖對應位置顏色變化
oriImage.setRGB(xl, yl, Color.LIGHT_GRAY.getRGB());
} else if (rgbFlg == 2) {
targetImage.setRGB(i, j, Color.WHITE.getRGB());
oriImage.setRGB(xl, yl, Color.GRAY.getRGB());
}else if(rgbFlg == 0){
//int alpha = 0;
targetImage.setRGB(i, j, rgbori & 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();
}
/**
* 將圖片轉換爲BASE64
* @param image
* @return
* @throws IOException
*/
public static String getImageBase64(BufferedImage image) throws IOException {
ByteArrayOutputStream out = new ByteArrayOutputStream();
ImageIO.write(image,"png",out);
//轉成byte數組
byte[] bytes = out.toByteArray();
BASE64Encoder encoder = new BASE64Encoder();
//生成BASE64編碼
return encoder.encode(bytes);
}
/**
* 將BASE64字符串轉換爲圖片
* @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;
}
}
package com.shiku.mianshi.controller;
import cn.xyz.commons.utils.RandomUtil;
import cn.xyz.commons.utils.VerifyImageUtil;
import cn.xyz.commons.vo.JSONMessage;
import cn.xyz.commons.vo.VerifyImage;
import cn.xyz.mianshi.utils.SKBeanUtils;
import org.springframework.web.bind.annotation.*;
/**
* 測試類
*
* @author 黃俊豪
* @date 2020/06/16
*/
@RestController
@RequestMapping("/imgVerify")
public class ImgVerifyController {
/**
* 生成驗證圖片並且保存到緩存中，過期時間五分鐘
*
* @param userId
* @return
* @throws Exception
*/
@PostMapping("/list")
public VerifyImage list(@RequestParam Integer userId) throws Exception {
Integer randomNum = RandomUtil.getRandomNum(1, 10);
//windows路徑
String filePath = "G:\\mianshi-parent\\mianshi-im-api\\src\\main\\resources\\data\\img\\"+randomNum+".jpg";
//linux路徑
//String filePath = "/opt/spring-boot-imapi/imgVerify/"+randomNum+".jpg";
//根據圖片路徑生成摳圖
VerifyImage verifyImage = VerifyImageUtil.getVerifyImage(filePath);
//保存到緩存
SKBeanUtils.getRedisService().addImgVerify(userId, verifyImage);
return verifyImage;
}
/**
* 校驗並返回驗證結果
*
* @param locationX 用戶滑動的X軸
* @param locationY 用戶滑動的Y軸
* @param userId userId
* @return 返回信息
*/
@PostMapping(value = "/verify")
public JSONMessage verify(Integer locationX,Integer locationY, Integer userId) {
return VerifyImageUtil.imgVerify(locationX, locationY, userId);
}
}
其中，我把生成的verifyImage對象存到的緩存，過期時間是五分鐘，在這五分鐘內，用戶校驗的都是之前生成的圖像，除非他刷新了，重新生成圖片。校驗成功後刪除緩存。