<强>前言
1、下面是一个效果展示;
2,先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同,内容相同我就不多说了,毕竟能解决问题就行,然而恰恰相反,这些东西都没有为我实质性地解决问题。可能图片验证是一个需要前后台同时交互的功能吧,从业的人员大部分都是偏向后台或者偏向前台的,所以写出来的博客都不能完整阐述整个流程,下面是我自己实践完成的内容,记录一下,供各位参阅斧正。
注:由于使用到的控件和工具较多,有许多地方做了省略,这里只做核心流程的记录。
<强>一、后端图片裁剪与生成
首先是一个图片处理工具VerifyImageUtil.class,它主要的作用是生成两张图片:一张被扣除了一部分的原始图片;一张抠出来图片。两两结合,可以组成一张完整的图片。原始图片(目标目录)提供了20张,规格都是590 * 360的,抠图需要的模板图(模板目录)有4张,规格都是93 * 360的(图片等各种资源会在文末给出)。将图片资源导入到我们项目的静态资源路径下(你也可以通过其他方式存储它们),我这边是弹簧启动的项目,所以就放在资源下的静态目录下了:
下面是,VerifyImageUtil.class
包com.mine.risk.util;
进口org.apache.commons.lang.StringUtils;
进口javax.imageio.ImageIO;
进口javax.imageio.ImageReadParam;
进口javax.imageio.ImageReader;
进口javax.imageio.stream.ImageInputStream;
进口java.awt。*;
进口java.awt.image.BufferedImage;
进口java.io.ByteArrayOutputStream;
进口java.io.File;
进口java.io.FileInputStream;
进口java.io.InputStream;
进口java.text.NumberFormat;
进口java.util.HashMap;
进口java.util.Iterator;
进口java.util.Map;
进口java.util.Random;/* *
*滑块验证工具类
* @author:精神
* @date:中创建10:57 2019/9/05
*/公开课VerifyImageUtil {/* *源文件宽度*/私有静态最终int ORI_WIDTH=590;/* *源文件高度*/私有静态最终int ORI_HEIGHT=360;/* *抠图坐标x */私有静态int X;/* *抠图坐标y */私有静态int Y;/* *模板图宽度*/私有静态int宽度;/* *模板图高度*/私有静态int高度;
公共静态int getX () {
返回X;
}
公共静态int getY () {
返回Y;
}/* *
*根据模板切图
* @param templateFile模板文件
* @param targetFile目标文件
* @param templateType模板文件类型
* @param targetType目标文件类型
* @return切图映射集合
* @throws异常异常
*/公共静态Map<字符串,byte[]比;templateFile pictureTemplatesCut(文件、文件targetFile templateType的字符串,字符串targetType){抛出异常
Map<字符串,byte[]比;pictureMap=new HashMap<比;(2);
如果(StringUtils.isEmpty (templateType) | | StringUtils.isEmpty (targetType)) {
把新RuntimeException(“文件类型是空的”);
}
InputStream targetIs=new FileInputStream (targetFile);//模板图
BufferedImage imageTemplate=ImageIO.read (templateFile);
宽度=imageTemplate.getWidth ();
身高=imageTemplate.getHeight ();//随机生成抠图坐标
generateCutoutCoordinates ();//最终图像
BufferedImage newImage=new BufferedImage(宽度、高度、imageTemplate.getType ());
Graphics2D图形=newImage.createGraphics ();
graphics.setBackground (Color.white);
int大胆=5;//获取感兴趣的目标区域
BufferedImage targetImageNoDeal=getTargetArea (X, Y,宽度、高度、targetIs targetType);//根据模板图片抠图
newImage=dealCutPictureByTemplate (targetImageNoDeal imageTemplate newImage);//设置“抗锯齿”的属性
graphics.setRenderingHint (RenderingHints。KEY_ANTIALIASING RenderingHints.VALUE_ANTIALIAS_ON);
图形。setStroke(新BasicStroke(粗体、BasicStroke。CAP_BUTT BasicStroke.JOIN_BEVEL));
图形。drawImage (newImage, 0, 0, null);
graphics.dispose ();//新建流。
ByteArrayOutputStream os=new ByteArrayOutputStream ();//利用ImageIO类提供的写方法,将bi以png图片的数据模式写入流。
ImageIO。写(newImage, png,操作系统);
byte [] newImages=os.toByteArray ();
pictureMap。把(“newImage”, newImages);//源图生成遮罩
BufferedImage oriImage=ImageIO.read (targetFile);
byte [] oriCopyImages=dealOriPictureByTemplate (oriImage imageTemplate, X, Y);
pictureMap。把(“oriCopyImage”, oriCopyImages);
System.out.println (X=" + X +”; y=" + y);
返回pictureMap;
}/* *
*抠图后原图生成
* @param oriImage原始图片
* @param templateImage模板图片
* @param x坐标x
* @param y坐标y
* @return添加遮罩层后的原始图片
* @throws异常异常
*/私有静态byte [] dealOriPictureByTemplate (BufferedImage oriImage, BufferedImage templateImage, int x,
{int y)抛出异常//源文件备份图像矩阵支持α通道的rgb图像
BufferedImage oriCopyImage=new BufferedImage (oriImage.getWidth (), oriImage.getHeight (), BufferedImage.TYPE_4BYTE_ABGR);//源文件图像矩阵
int [] [] oriImageData=https://www.yisu.com/zixun/getData (oriImage);//模板图像矩阵
int [] [] templateImageData=getData (templateImage);//复制源图做不透明处理
for (int i=0;我
