具体实现2.1

之前项目需要在验证码模块增加滑动验证码用来给手机端使用的大概看了下主要方法就是将图片切割然后记住偏移量进行滑动前端验证的时候需要用前端传入的偏移量和生成的偏移量进行对比如果在阈值之内就验证通过否则就不通过。

具体实现方式见下文。

之前没时间写最近记录一下。

具体实现

本工程主要依赖springboot框架并且需要redis存验证码的信息还需要几个图片用来生成验证码。

2.1

com.thcb.captchademo.captcha.domain;import

lombok.Data;/***

com.thcb.captchademo.captcha.domain;import

lombok.Data;/***

com.thcb.captchademo.captcha.utils;import

操作消息提醒**

com.thcb.captchademo.captcha.utils;import

com.thcb.captchademo.captcha.domain.Captcha;import

import

https://loyer.wang/view/ftp/wallpaper/%s.jpg;/***

本地图片地址**/private

{captcha.setCanvasWidth(320);}//设置画布高度默认值if

null)

{captcha.setCanvasHeight(155);}//设置阻塞块宽度默认值if

null)

{captcha.setBlockWidth(65);}//设置阻塞块高度默认值if

null)

{captcha.setBlockHeight(55);}//设置阻塞块凹凸半径默认值if

null)

{captcha.setBlockRadius(9);}//设置图片来源默认值if

(captcha.getPlace()

ImageIO.read(url.openStream());}//获取本地图片else

{int

{System.out.println(获取拼图资源失败);//异常处理return

null;}}/***

bufferedImage.getScaledInstance(width,

height,

Image.SCALE_SMOOTH);BufferedImage

resultImage

BufferedImage.TYPE_INT_ARGB);Graphics2D

graphics2D

resultImage.createGraphics();graphics2D.drawImage(image,

null);graphics2D.dispose();return

resultImage;}/***

BufferedImage.TYPE_4BYTE_ABGR);//阻塞块的轮廓图int[][]

blockData

Color.BLACK.getRGB());blockImage.setRGB(i,

blockY

j));//轮廓设置为白色取带像素和无像素的界点判断该点是不是临界轮廓点if

(blockData[i

Color.WHITE.getRGB());waterImage.setRGB(i,

Color.WHITE.getRGB());}}//这里把背景设为透明else

Color.TRANSLUCENT);waterImage.setRGB(i,

catch

(ArrayIndexOutOfBoundsException

{//防止数组下标越界异常}}}//在画布上添加阻塞块水印addBlockWatermark(canvasImage,

waterImage,

int[blockWidth][blockHeight];double

random1

(x-a)²(y-b)²r²,标识圆心a,b,半径为r的圆//计算需要的小图轮廓用二维数组来表示二维数组有两张值0和1其中0表示没有颜色1有颜色for

(int

Objects.requireNonNull(circle1)[0],

Math.pow(j

Objects.requireNonNull(circle2)[0],

Math.pow(j

addBlockWatermark(BufferedImage

canvasImage,

canvasImage.createGraphics();graphics2D.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,

0.8f));graphics2D.drawImage(blockImage,

null);graphics2D.dispose();}/***

static

ByteArrayOutputStream();ImageIO.write(bufferedImage,

type,

Base64.getEncoder().encodeToString(byteArrayOutputStream.toByteArray());return

String.format(data:image/%s;base64,%s,

type,

{System.out.println(图片资源转换BASE64失败);//异常处理return

null;}}

service层封装了工具类的一些方法这里为了简单没写接口正常应该是service和impl两个类。

package

com.thcb.captchademo.captcha.service;import

com.thcb.captchademo.captcha.domain.Captcha;

import

com.thcb.captchademo.captcha.utils.CaptchaUtils;

import

org.springframework.beans.factory.annotation.Autowired;

import

org.springframework.data.redis.core.StringRedisTemplate;

import

org.springframework.data.redis.core.ValueOperations;

import

org.springframework.stereotype.Service;import

import

java.util.concurrent.TimeUnit;/***

滑动验证码Service**

stringRedisTemplate.opsForValue();String

key

(Math.abs(Integer.parseInt(text)

ALLOW_DEVIATION)

验证成功删除redis缓存stringRedisTemplate.delete(key);return

null;}/***

stringRedisTemplate.opsForValue();ops.set(imageCode:

key,

获取验证码拼图生成的抠图和带抠图阴影的大图及抠图坐标**/public

Object

{//参数校验CaptchaUtils.checkCaptcha(captcha);//获取画布的宽高int

canvasWidth

captcha.getCanvasHeight();//获取阻塞块的宽高/半径int

blockWidth

captcha.getBlockRadius();//获取资源图BufferedImage

canvasImage

CaptchaUtils.getBufferedImage(captcha.getPlace());//调整原图到指定大小canvasImage

CaptchaUtils.imageResize(canvasImage,

canvasWidth,

CaptchaUtils.getNonceByRange(blockWidth,

canvasWidth

CaptchaUtils.getNonceByRange(10,

canvasHeight

BufferedImage.TYPE_4BYTE_ABGR);//新建的图像根据轮廓图颜色赋值源图生成遮罩CaptchaUtils.cutByTemplate(canvasImage,

blockImage,

UUID.randomUUID().toString().replaceAll(-,

);//

String.valueOf(blockX));//设置返回参数captcha.setNonceStr(nonceStr);captcha.setBlockY(blockY);captcha.setBlockSrc(CaptchaUtils.toBase64(blockImage,

png));captcha.setCanvasSrc(CaptchaUtils.toBase64(canvasImage,

png));return

controller层有两个方法一个是获取验证码的方法一个是验证码校验的方法。

package

com.thcb.captchademo.captcha.controller;import

com.thcb.captchademo.captcha.domain.Captcha;

import

com.thcb.captchademo.captcha.domain.LoginVo;

import

com.thcb.captchademo.captcha.service.CaptchaService;

import

com.thcb.captchademo.captcha.utils.AjaxResult;

import

org.springframework.beans.factory.annotation.Autowired;

import

org.springframework.web.bind.annotation.PostMapping;

import

org.springframework.web.bind.annotation.RequestBody;

import

org.springframework.web.bind.annotation.RequestMapping;

import

org.springframework.web.bind.annotation.RestController;/***

滑动验证码Controller**

captchaService;PostMapping(/slideCaptchaImage)public

AjaxResult

AjaxResult.success(captchaService.getCaptcha(new

/login)public

captchaService.checkImageCode(loginVo.getNonceStr(),

(msg

工程不算复杂源码上传到GitCode项目地址上传有点问题而且目前只能设置成私密项目等之后可以调整的时候再改成公开的。

滑动验证码功能不算复杂可以和项目当前已有的验证码共存调用不同的接口返回不同类型的验证码当然这个就根据项目具体情况确定了。