一步一步实现图片滑动验证码

项目中要使用图片滑动验证码，顾了解之

需要以下几步来完成：: 1.后端随机计算抠图的距离，生成背景与拼图块的图片，缓存拼图块需滑动的距离像素。; 2.前端加载背景图和浮动框，通过拖动条拖动，后台进行验证。
项目需求，满足PC和移动Web调用：: 此时要考虑PC和不同移动设备Web端的图形大小，防止变形。; 参考【小红书】的滑块验证; 后端生成 600* 300的背景图，浮动层 90*300。 它的浮动层模板高度是和原图一致的，可省去计算高度的过程。; PC端缩放如： 400 *200，; 移动端：288*144、 300 * 150

生成背景和滑动块的工具类：


import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Transparency;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;import javax.imageio.ImageIO;import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.springframework.util.Base64Utils;/*** 滑动验证码*/
public class VerifyImageUtil {private final static  Logger log = LogManager.getLogger(VerifyImageUtil.class);private static int BOLD = 5;private static final String IMG_FILE_TYPE = "jpg";private static final String TEMP_IMG_FILE_TYPE = "png";/*** 根据模板切图** @param templateFile* @param targetFile* @return* @throws Exception*/public static Map<String, Object> pictureTemplatesCut(File templateFile, File targetFile) throws Exception {Map<String, Object> pictureMap = new HashMap<>();// 模板图BufferedImage imageTemplate = ImageIO.read(templateFile);int templateWidth = imageTemplate.getWidth();int templateHeight = imageTemplate.getHeight();// 原图BufferedImage oriImage = ImageIO.read(targetFile);int oriImageWidth = oriImage.getWidth();int oriImageHeight = oriImage.getHeight();//随机生成抠图坐标X,Y//X轴距离右端targetWidth  Y轴距离底部targetHeight以上Random random = new Random();int widthRandom = random.nextInt(oriImageWidth - 2 * templateWidth) + templateWidth;int heightRandom = 0;// 新建一个和模板一样大小的图像，TYPE_4BYTE_ABGR表示具有8位RGBA颜色分量的图像，正常取imageTemplate.getType()BufferedImage newImage = new BufferedImage(templateWidth, templateHeight, imageTemplate.getType());//得到画笔对象Graphics2D graphics = newImage.createGraphics();//如果需要生成RGB格式，需要做如下配置,Transparency 设置透明newImage = graphics.getDeviceConfiguration().createCompatibleImage(templateWidth, templateHeight, Transparency.TRANSLUCENT);// 新建的图像根据模板颜色赋值,源图生成遮罩cutByTemplate(oriImage, imageTemplate, newImage, widthRandom, heightRandom);// 设置“抗锯齿”的属性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 newImageOs = new ByteArrayOutputStream();//利用ImageIO类提供的write方法，将bi以png图片的数据模式写入流。ImageIO.write(newImage, TEMP_IMG_FILE_TYPE, newImageOs);byte[] newImagebyte = newImageOs.toByteArray();//新建流。ByteArrayOutputStream oriImagesOs = new ByteArrayOutputStream();//利用ImageIO类提供的write方法，将bi以jpg图片的数据模式写入流。ImageIO.write(oriImage, IMG_FILE_TYPE, oriImagesOs);byte[] oriImageByte = oriImagesOs.toByteArray();pictureMap.put("smallImage", Base64Utils.encodeToString(newImagebyte));pictureMap.put("bigImage", Base64Utils.encodeToString(oriImageByte));
//        System.out.println("widthRandom:" + widthRandom);pictureMap.put("xWidth", widthRandom);pictureMap.put("yHeight", heightRandom);return pictureMap;}/*** 添加水印* @param oriImage*//*private static BufferedImage addWatermark(BufferedImage oriImage) throws IOException {Graphics2D graphics2D = oriImage.createGraphics();graphics2D.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR);// 设置水印文字颜色graphics2D.setColor(Color.BLUE);// 设置水印文字Fontgraphics2D.setFont(new java.awt.Font("宋体", java.awt.Font.BOLD, 50));// 设置水印文字透明度graphics2D.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, 0.5f));// 第一参数->设置的内容，后面两个参数->文字在图片上的坐标位置(x,y)graphics2D.drawString("zhoujin@qq.com", 400,300);graphics2D.dispose(); //释放return oriImage;}*//*** @param oriImage      原图* @param templateImage 模板图* @param newImage      新抠出的小图* @param x             随机扣取坐标X* @param y             随机扣取坐标y* @throws Exception*/private static void cutByTemplate(BufferedImage oriImage, BufferedImage templateImage, BufferedImage newImage, int x, int y) {//临时数组遍历用于高斯模糊存周边像素值int[][] martrix = new int[3][3];int[] values = new int[9];int xLength = templateImage.getWidth();int yLength = templateImage.getHeight();// 模板图像宽度for (int i = 0; i < xLength; i++) {// 模板图片高度for (int j = 0; j < yLength; j++) {// 如果模板图像当前像素点不是透明色 copy源文件信息到目标图片中int rgb = templateImage.getRGB(i, j);if (rgb < 0) {//模板图 位置上色newImage.setRGB(i, j, oriImage.getRGB(x + i, y + j));//抠图区域高斯模糊readPixel(oriImage, x + i, y + j, values);fillMatrix(martrix, values);oriImage.setRGB(x + i, y + j, avgMatrix(martrix));}//防止数组越界判断if (i == (xLength - 1) || j == (yLength - 1)) {continue;}int rightRgb = templateImage.getRGB(i + 1, j);int downRgb = templateImage.getRGB(i, j + 1);//描边处理，,取带像素和无像素的界点，判断该点是不是临界轮廓点,如果是设置该坐标像素是白色
//                if ((rgb >= 0 && rightRgb < 0) || (rgb < 0 && rightRgb >= 0) || (rgb >= 0 && downRgb < 0) || (rgb < 0 && downRgb >= 0)) {//                    newImage.setRGB(i, j, Color.white.getRGB());
//                    oriImage.setRGB(x + i, y + j, Color.white.getRGB());
//                }}}}private static void readPixel(BufferedImage img, int x, int y, int[] pixels) {int xStart = x - 1;int yStart = y - 1;int current = 0;for (int i = xStart; i < 3 + xStart; i++) {for (int j = yStart; j < 3 + yStart; j++) {int tx = i;if (tx < 0) {tx = -tx;} else if (tx >= img.getWidth()) {tx = x;}int ty = j;if (ty < 0) {ty = -ty;} else if (ty >= img.getHeight()) {ty = y;}pixels[current++] = img.getRGB(tx, ty);}}}private static void fillMatrix(int[][] matrix, int[] values) {int filled = 0;for (int i = 0; i < matrix.length; i++) {int[] x = matrix[i];for (int j = 0; j < x.length; j++) {x[j] = values[filled++];}}}private static int avgMatrix(int[][] matrix) {int r = 0;int g = 0;int b = 0;for (int i = 0; i < matrix.length; i++) {int[] x = matrix[i];for (int j = 0; j < x.length; j++) {if (j == 1) {continue;}Color c = new Color(x[j]);r += c.getRed();g += c.getGreen();b += c.getBlue();}}return new Color(r / 8, g / 8, b / 8).getRGB();}
}

在项目resource的目录存放背景图和浮动层模板：

 /*** 获取资源图片路径*/public List<String> queryFileList(String path) {//获取容器资源解析器ResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();List<String> filelist = new ArrayList<String>();// 获取远程服务器IP和端口try {//获取所有匹配的文件Resource[] resources = resolver.getResources(path);for (Resource resource : resources) {filelist.add(resource.getFile().getPath());}} catch (Exception e) {e.printStackTrace();}return filelist;}/*** 获取验证码** VerifyImageUtil 可考虑 加强验证难度，比如【小红书】 背景图生成时 多抠图一次随机模板。*** @return* @throws Exception*/@RequestMapping(value = "/getImageVerify", method = RequestMethod.GET)public AjaxResult getImageVerifyCode(HttpServletRequest request) {//bg图String IMG_PATH = "/image/bg/*.*";//模板图String TEMP_IMG_PATH = "/image/fg/*.*";// 读取背景图目录List<String> imgList = queryFileList(IMG_PATH);int randNum = new Random().nextInt(imgList.size());File targetFile = new File(imgList.get(randNum));// 读取模板目录List<String> tempimgList = queryFileList(TEMP_IMG_PATH);randNum = new Random().nextInt(tempimgList.size());File tempImgFile = new File(tempimgList.get(randNum));// 根据模板裁剪图片Map<String, Object> resultMap = null;try {resultMap = VerifyImageUtil.pictureTemplatesCut(tempImgFile, targetFile);            int xWidth = (int) resultMap.get("xWidth");        //缓存记录key，项目实现 redis 或者 requset seesion// Cached.set(key, xWidth);request.setAttribute("xWidth",xWidth);// 移除map的滑动距离，不返回给前端resultMap.remove("xWidth");//resultMap 包含 背景图片和浮动图片return AjaxResult.success(resultMap);} catch (Exception e) {return AjaxResult.error("获取验证码失败");}}/*** 校验滑块拼图验证码** @param moveLength 移动距离* @return BaseRestResult 返回类型* @Description: 生成图形验证码*/@RequestMapping(value = "/verifyImageCode", method = RequestMethod.POST, produces = {"application/json;charset=UTF-8"})public AjaxResult verifyImageCode(@RequestParam(value = "moveLength") String moveLength, HttpServletRequest request) {Double dMoveLength = Double.valueOf(moveLength);AjaxResult resultMap;try {//从redis或者reqest中获取 横向移动的距离int xWidth =  request.getAttribute("xWidth");if (xWidth < 1) {resultMap = AjaxResult.error("验证过期，请重试");} else {// 设置允许的偏差值if (Math.abs((int) xWidth - dMoveLength) > 10) {resultMap = AjaxResult.error("验证不通过");} else {resultMap = AjaxResult.success("验证通过");}}} catch (Exception e) {resultMap = AjaxResult.success("验证失败，请重试");} return resultMap;}

我的前端vue实现，先看效果：

vue组件：


<template><div class="slide-verify" id="slideVerify" :style="widthlable" onselectstart="return false;"><canvas :width="w" :height="h" ref="canvas" ></canvas><canvas :width="w" :height="h" ref="block"  class="slide-verify-block"></canvas><div @click="refresh" class="slide-verify-refresh-icon"></div><div class="slide-verify-slider" :style="widthlable" :class="{'container-active': containerActive, 'container-success': containerSuccess, 'container-fail': containerFail}"><div class="slide-verify-slider-mask" :style="{width: sliderMaskWidth}"><!-- slider --><div @mousedown="sliderDown"@touchstart="touchStartEvent"@touchmove="touchMoveEvent"@touchend="touchEndEvent"class="slide-verify-slider-mask-item":style="{left: sliderLeft}"><div class="slide-verify-slider-mask-item-icon"></div></div></div><span class="slide-verify-slider-text">{{sliderText}}</span></div></div>
</template>
<script>
const PI = Math.PI;function sum(x, y) {return x + y
}function square(x) {return x * x
}
export default {name: 'SlideVerify',props: {// block lengthl: {type: Number,default: 42,},// block radiusr: {type: Number,default: 10,},// canvas widthw: {type: Number,default: 310,},// canvas heighth: {type: Number,default: 155,},block_x: {type: Number,default: 155,},block_y: {type: Number,default: 20,},// sliderText: {//   type: String,//   default: 'Slide filled right',// },imgurl: {type: String,default: '',},miniimgurl: {type: String,default: '',},},data() {return {containerActive: false, // container active classcontainerSuccess: false, // container success classcontainerFail: false, // container fail classcanvasCtx: null,blockCtx: null,block: null,canvasStr: null,//block_x: undefined, // container random position// block_y: undefined,L: this.l + this.r * 2 + 3, // block real lenghtimg: undefined,originX: undefined,originY: undefined,isMouseDown: false,trail: [],widthlable:'',sliderLeft: 0, // block right offsetsliderMaskWidth: 0, // mask widthsliderText:'向右划'}},mounted() {//随机生成数this.block_x =this.init()},methods: {init() {this.initDom()this.bindEvents()this.widthlable ='width:'+this.w+'px;'},initDom() {this.block = this.$refs.block;this.canvasStr = this.$refs.canvas;this.canvasCtx = this.canvasStr.getContext('2d')this.blockCtx = this.block.getContext('2d')},initImg(h) {var that = thisconst img = document.createElement('img');img.onload = onload;img.onerror = () => {img.src = that.imgurl}img.src = that.imgurlimg.onload = function(){that.canvasCtx.drawImage(img, 0, 0, that.w, that.h)}this.img=imgconst img1 = document.createElement('img');var  blockCtx = that.blockCtxvar block_y = h||that.block_yimg1.onerror = () => {img1.src = that.miniimgurl}img1.src = that.miniimgurlimg1.onload = function(){blockCtx.drawImage(img1, 0, block_y, 60, that.h)}},refresh() {this.$emit('refresh')},sliderDown(event) {this.originX = event.clientX;this.originY = event.clientY;this.isMouseDown = true;},touchStartEvent(e) {this.originX = e.changedTouches[0].pageX;this.originY = e.changedTouches[0].pageY;this.isMouseDown = true;},bindEvents() {document.addEventListener('mousemove', (e) => {if (!this.isMouseDown) return false;const moveX = e.clientX - this.originX;const moveY = e.clientY - this.originY;if (moveX < 0 || moveX + 38 >= this.w) return false;this.sliderLeft = moveX + 'px';let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX;this.block.style.left = blockLeft + 'px';this.containerActive = true; // add activethis.sliderMaskWidth = moveX + 'px';this.trail.push(moveY);});document.addEventListener('mouseup', (e) => {if (!this.isMouseDown) return falsethis.isMouseDown = falseif (e.clientX === this.originX) return false;this.containerActive = false; // remove activethis.verify()})},touchMoveEvent(e) {if (!this.isMouseDown) return false;const moveX = e.changedTouches[0].pageX - this.originX;const moveY = e.changedTouches[0].pageY - this.originY;if (moveX < 0 || moveX + 38 >= this.w) return false;this.sliderLeft = moveX + 'px';let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX;this.block.style.left = blockLeft + 'px';this.containerActive = true;this.sliderMaskWidth = moveX + 'px';this.trail.push(moveY);},touchEndEvent(e) {if (!this.isMouseDown) return falsethis.isMouseDown = falseif (e.changedTouches[0].pageX === this.originX) return false;this.containerActive = false;this.verify()},verify() {const arr = this.trail // drag y move distanceconst average = arr.reduce(sum) / arr.length // averageconst deviations = arr.map(x => x - average) // deviation arrayconst stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length) // standard deviationconst left = parseInt(this.block.style.left)this.$emit('success',left)},reset(h) {this.containerActive = false;this.containerSuccess = false;this.containerFail = false;this.sliderLeft = 0;this.block.style.left = 0;this.sliderMaskWidth = 0;this.canvasCtx.clearRect(0, 0, this.w, this.h)this.blockCtx.clearRect(0, 0, this.w,this.h)this.initImg(h)}}
}
</script>
<style scoped>
.slide-verify {position: relative;width: 310px;
}.slide-verify-block {position: absolute;left: 0;top: 0
}.slide-verify-refresh-icon {position: absolute;right: 0;top: 0;width: 34px;height: 34px;cursor: pointer;background: url(https://cstaticdun.126.net//2.13.6/images/icon_light.4353d81.png) 0 -233px;background-size: 32px 544px;
}.slide-verify-slider {position: relative;text-align: center;width: 310px;height: 40px;line-height: 40px;margin-top: 15px;background: #f7f9fa;color: #45494c;border: 1px solid #e4e7eb
}.slide-verify-slider-mask {position: absolute;left: 0;top: 0;height: 40px;border: 0 solid #1991FA;background: #D1E9FE
}.slide-verify-slider-mask-item {position: absolute;top: 0;left: 0;width: 40px;height: 40px;background: #fff;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);cursor: pointer;transition: background .2s linear
}.slide-verify-slider-mask-item:hover {background: #1991FA
}.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon {background-position: 0 -13px
}.slide-verify-slider-mask-item-icon {position: absolute;top: 15px;left: 13px;width: 14px;height: 12px;background: url("../../assets/images/light.svg") 0 -26px;background-size: 34px 471px
}
.container-active .slide-verify-slider-mask-item {height: 38px;top: -1px;border: 1px solid #1991FA;
}.container-active .slide-verify-slider-mask {height: 38px;border-width: 1px;
}.container-success .slide-verify-slider-mask-item {height: 38px;top: -1px;border: 1px solid #52CCBA;background-color: #52CCBA !important;
}.container-success .slide-verify-slider-mask {height: 38px;border: 1px solid #52CCBA;background-color: #D2F4EF;
}.container-success .slide-verify-slider-mask-item-icon {background-position: 0 0 !important;
}.container-fail .slide-verify-slider-mask-item {height: 38px;top: -1px;border: 1px solid #f57a7a;background-color: #f57a7a !important;
}.container-fail .slide-verify-slider-mask {height: 38px;border: 1px solid #f57a7a;background-color: #fce1e1;
}.container-fail .slide-verify-slider-mask-item-icon {top: 14px;background-position: 0 -82px !important;
}.container-active .slide-verify-slider-text,
.container-success .slide-verify-slider-text,
.container-fail .slide-verify-slider-text {display: none;
}
</style>

使用：

        <slideverify :l="42"  ref="dialogopen":r="10":w="400":h="200":block_y="block_y":imgurl="imgurl":miniimgurl="miniimgurl"@success="onSuccess"@refresh="onRefresh":slider-text="text"></slideverify>

methods: {//获取验证码getImageVerifyCode: function () {var that = thisgetImageVerifyCodeImg().then(res => {if (!res || res.code != '200') {this.$message({showClose: true,message: '获取图形验证码失败，请重试',type: 'error'})} else {var imgobj = res.datathat.block_y = imgobj.yHeightthat.imgurl = 'data:image/jpg;base64,' + imgobj.bigImagethat.miniimgurl = 'data:image/jpg;base64,' + imgobj.smallImage}})},//刷新onRefresh() {this.imgurl = ''this.miniimgurl = ''this.getImageVerifyCode()},//滑动结束，后台验证, l是滑动距离onSuccess(l) {verifyImageCode(l).then(res => {if (res.msg === "验证通过") {Message({message: res.msg,type: 'success'})} else {Message({message: res.msg,type: 'error'})this.onRefresh();}})}}

移动端：uni-app插件市场
图片滑动验证码
根据后台返回内容，稍加修改，效果如图：

后台抠图所需的模板图：

更多模板图从【小红书】抓取下载。
小红书滑动块验证

Java Vue uni-app 三端实现，滑动拼图验证码相关推荐

原生七彩影视APP源码支持PC+WAP+APP三端
介绍: 原生七彩安卓影视APP源码支持PC+WAP+APP三端对接苹果CMS后台附安装教程网盘下载地址: http://kekewangLuo.cc/8gxTECO3W4q0 图片:
原生七彩安卓影视APP源码-支持PC+WAP+APP三端
介绍: 原生七彩安卓影视APP源码支持PC+WAP+APP三端对接苹果CMS后台附安装教程网盘下载地址: http://kekewangLuo.net/M5QQcserh8x0 图片:
uniapp、vue实现滑动拼图验证码
实际开发工作中,在登陆的时候需要短信验证码,但容易引起爬虫行为,需要用到反爬虫验证码,今天介绍一下拼图验证码,解决验证码反爬虫中的滑动验证码反爬虫. 原理滑动拼图验证码是在滑块验证码的基础上增加了一 ...
小视频app源码，Android 滑动拼图验证码控件
小视频app源码,Android 滑动拼图验证码控件代码实现: 滑块视图类:SlideImageView.java.实现小视频APP源码随机选取拼图位置,对拼图位置进行验证等功能. public c ...
手机HTML拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果_气质_前端开发者...
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
php滑动拼图验证,JS实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo ...
Android 滑动拼图验证码控件
Android 滑动拼图验证码控件简介: 很多软件为了安全防止恶意攻击,会在登录/注册时进行人机验证,常见的人机验证方式有:谷歌点击复选框进行验证,输入验证码验证,短信验证码,语音验证,文字按顺序选 ...
滑动拼图验证码操作步骤：_拼图项目：一个不完整的难题
滑动拼图验证码操作步骤: 马克·雷因霍尔德(Mark Reinhold)最近提议延迟Java 9,以花更多的时间完成项目Jigsaw,这是即将发布的版本的主要功能. 虽然这个决定肯定会使Java的厄运 ...
滑动拼图验证码操作步骤：_拼图项目：延期的后果
滑动拼图验证码操作步骤: Mark Reinhold先生于2012年7月宣布 ,他们计划从Java 8撤消Jigsaw项目 ,因为Jigsaw计划于2013年9月(从现在开始一年)推迟其发布. 这个日 ...
爬虫之极验验证码破解-滑动拼图验证码破解
滑动拼图验证码破解前言步骤分析第一步,获取原图第二步拼接图片第三步计算豁口所在位置第四步计算拖动距离模拟拖动其他前言滑动验证码已经流行很多年了,我们在这里尝试一下如何实现滑动 ...

Java Vue uni-app 三端实现，滑动拼图验证码

一步一步实现图片滑动验证码

Java Vue uni-app 三端实现，滑动拼图验证码相关推荐

最新文章

热门文章

Java Vue uni-app 三端实现，滑动拼图验证码

一步一步实现 图片滑动验证码

Java Vue uni-app 三端实现，滑动拼图验证码相关推荐

最新文章

热门文章

一步一步实现图片滑动验证码