php滑动拼图验证,如何在PHP环境下实现滑动拼图验证
今许多的网站都用到了滑动拼图的验证方式,因为它操作非常简单,只需要用户点击鼠标拉动,就能完成验证。减少了用户的输入,比较新颖,大大提高了用户体验的同时,安全性也没有降低。
主要类库:PHP的GD库
核心流程:后端生成一张从原图中随机位置抠出的拼图状的图与带有水印的原图,记录抠图坐标。前端拿到图片后,实现滑动交互,获取到用户拖动拼图的位移值,传给后端,后端校验误差是否在合理范围之内。
具体步骤
一、确定拼图的轮廓
如何从一副图中抠出拼图形状呢?图片,都是由一个个像素组成。一个像素一个颜色,组成一幅图。在GD库里,一张图片的原点在图片的左上角,往右是X轴,往下是y轴。如此(x,y)就是一个像素。因此,一副图的所有像素可以形成一个二维数组,类似$arr[y][x]。只要我们判断知道某个坐标在我们想要得到的轮廓里面,就设为$arr[y][x] = 1,反之,设为0,我们就能得到一个拼图轮廓的二维数组。
一个拼图可以理解为有一个矩形和若干个圆形组成 ,矩形简单,只要判断该坐标x和y是否在某个特定范围内就行了。
那圆形呢?圆形我们必须要用到圆形的公式,(x-a)²+(y-b)²=r²,x和y就是我们的坐标,而a和b就是圆中心的坐标,r就是圆的半径,那么,我们根据公式就不难知道某坐标是否在圆内。
示例代码如下:
$pic_w = 100;
$pic_h = 100;
$r = 10; //半径
$dr = $r*$r; //半径平方
$local_w = $r*2-5;
//第一个圆中心点
$circular1_x = $local_w+($pic_w-($local_w)*2)/2;
$circular1_y = $r;
//第二个圆中心点
$circular2_x = $pic_h-$r;
$circular2_y = $local_w+($pic_h-($local_w)*2)/2;;
$jigsawArray = array();
for($i=0;$i
for($j=0;$j
//根据公式(x-a)²+(y-b)² = r² 算出像素是否在圆内
$d1 = pow($j-$circular1_x,2)+pow($i-$circular1_y,2);
$d2 = pow($j-$circular2_x,2)+pow($i-$circular2_y,2);
if(($i>=$local_w && $j>=$local_w && $i<=$pic_h-$local_w && $j<=$pic_w-$local_w) || $d1<=$dr || $d2<=$dr){
$jigsawArray[$i][$j] = 1; //在拼图内为1
} else {
$jigsawArray[$i][$j] = 0; //在拼图外为0
}
}
}
二、从原图随机位置抠图并打上水印
在上一步我们得到了一个拼图轮廓(二维数组),根据这个二维数组的值,我们就能在原图中抠出一个拼图形状出来,并打上水印。
示例代码如下:
//原图
$srcFile = $this->srcPic;
$src_w = $this->pic_info['w']; //原图宽
$src_h = $this->pic_info['h']; //原图高
$src_im = imagecreatefrompng($srcFile);
$dst_im = imagecreatetruecolor($src_w,$src_h);
//根据原图尺寸创建一个相同大小的真彩色位图
//给新图填充背景色
$black = imagecolorallocate($dst_im,0,0,0);//黑
imagefill($dst_im,0,0,$black);
imagecopymerge($dst_im,$src_im,0,0,0,0,$src_w,$src_h,100);//原图图像写入新建真彩位图中
//生成透明底拼图画布
$jigsaw_im = imagecreatetruecolor($pic_w,$pic_h); //100*100拼图画布
imagealphablending($jigsaw_im,false);
imagesavealpha($jigsaw_im, true);
$jigsaw_bg = imagecolorallocatealpha($jigsaw_im,0,0,0,127);
imagefill($jigsaw_im, 0, 0, $jigsaw_bg);
//随机位置
$src_x = mt_rand(215,$src_w-$pic_w);; //水印位于大图x坐标
$src_y= mt_rand(0,$src_h-35);; //y坐标
$rgb_white = imagecolorallocatealpha($dst_im,127,127,127,60); //灰色水印
//循环轮廓抠图
for($i=0;$i
for ($j=0;$j
if($this->jigsawArray[$i][$j] == 1){
//如果在轮廓内,取原图像素颜色
$rgb = ImageColorAt($dst_im,$src_x+$j,$src_y+$i);
imagesetpixel($jigsaw_im,$j,$i,$rgb); //在拼图画布上色
//在原图挖坑(打上灰色)
imagesetpixel($dst_im,$src_x+$j,$src_y+$i,$rgb_white);
}
}
}
//保存图片
imagepng($dst_im,'big.png');
imagepng($jigsaw_im,'jigsaw.png');
imagedestroy($src_im);
imagedestroy($dst_im);
imagedestroy($jigsaw_im);
这样,我们就得到了我们想要的拼图和有水印的原图啦。只要我们将这两张图和随机位置的y值给到前端,由前端进行交互,拿到用户拖动位置值给后端就行了。
三、校验
校验非常简单,无非就是判断用户拖动的值跟随机位置的x值是否在一个合理的范围内。so easy!
/**
* @nmae 校验数据合法性
* @param int $val 用户拉动拼图偏移量
* @param int $rules 标准位(x)
* @return bool
*/
public functioncheckData($val,$rule)
{
if( empty($val) || !is_numeric($val) || empty($rule) || !is_numeric($rule) ) {
return false;
}
//允许偏移量
$max = $rule+6;
$min = $rule-6;
if( $val <= $max && $val >= $min ) {
return true;
} else {
return false;
}
}
以上,滑动验证码的基本核心处理步骤以及结束。这里面还有很多细节需要各位自行调节,比如轮廓的大小,比如如何让拼图和水印更好看更立体之类的,在此就不多说了。
php滑动拼图验证,如何在PHP环境下实现滑动拼图验证相关推荐
- 如何在UBUNTU环境下使用GAPPProxy
如何在UBUNTU环境下使用GAPPProxy 目前天朝对于网络这个大通道管理的很严谨,于是我们这些把网站流浪在海外的人们吃尽了苦头,尤其是YOUTUB完全不能访问最郁闷,在WINDOWS下大家可能用 ...
- 如何在linux环境下搭建Tor代理服务器
如何在linux环境下搭建Tor代理服务器 一.简介 首先, Tor官方提供已不再提供单独的Tor内核下载,只提供集成了Tor内核的Tor-Browser下载.Tor Browser 内置了Tor,f ...
- 如何在Mac环境下搭建svn服务器端环境
为什么80%的码农都做不了架构师?>>> 在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功 ...
- KDE应用如何在GNOME环境下运行?
KDE应用如何在GNOME环境下运行? 2014/03/19 | 分类: IT技术 | 0 条评论 | 标签: GNOME, KDE 分享到:1 本文由 伯乐在线 - honpey 翻译自 howto ...
- 如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通信
http://blog.csdn.net/whuancai/article/details/11994341 如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通 ...
- r语言在linux怎么实现,如何在linux环境下使用r语言
如何在linux环境下使用r语言 真朱丶379 | 浏览 1974 次 发布于2015-12-23 13:05 最佳答案 1.下载 wget http://mirror.bjtu.edu.cn/cra ...
- 测绘——如何在win10环境下安装CAD2006+CASS7.0
如何在win10环境下安装CAD2006+CASS7.0 在win10环境下安装CAD2006会出现很多问题,但这一类早期软件仍在很多行业中被广泛使用,想要进行正确安装,要进行以下几步操作: 一.首先 ...
- 如何在 Windows 环境下配置 PHP 开发运行环境
我们都知道 PHP 运行需要的环境通常被称为 AMP. 其中 A 是 Apache 应用服务器,M 是 Mysql,P 就是 PHP 了. 实际上,很多人可能会使用一个测试 Mysql,但是针对一些小 ...
- 如何在IIS环境下布置https
昨天各位小伙伴都很开心的领取了自己的SSL证书,但是大部分小伙伴却不知道如何部署,也许是因为第一次接触SSL这种高端的东西吧,不过个人觉得就是懒懒懒...本来小编也挺懒的,但是答应了各位小伙伴的,那么 ...
最新文章
- 111.二叉树的最小深度
- 两个充电宝能互充电吗_国人鬼才设计,手掌大智能芯片充电宝能暖手、充电、补光镜三合一...
- ajax的url怎么将后缀补上_蜂蜜杏仁怎么做?杏仁和蜂蜜腌制方法
- 哈啰出行赴美递交招股书:2020年营收60亿元 顺风车成新增长极
- Topshelf便捷创建Windows服务
- 新版在线全网音乐搜索下载源码
- 如何下载微博、B站(哔哩哔哩)视频到电脑
- 服务器防御DDOS的办法
- 揭秘 | 直播美颜不靠脸 靠的是阿里云程序员?
- 解决可以上QQ,但是无法上网的问题
- 拼接大屏数据展示_大屏幕实时数据可视化解决方案?
- 【转】解决win10系统每次重启桌面图标排列混乱的问题!亲测有效!!
- 下载rpm离线安装包
- 苹果ios用js的Date() 获取到的日期时间 显示NaN
- [git] your branch is ahead of ... 解决办法
- c++ 写入文件_常见数据库写入Webshell汇总
- js动态设置鼠标悬浮
- 腾讯游戏平台下载|腾讯游戏平台使用体验
- 【技术干货】听阿里云CDN安防技术专家金九讲SystemTap使用技巧
- windows10系统下win键失效
热门文章
- 用frp开源工具,实现内网穿透(详细教程)
- 2013南大专业课试题答案
- 芯片加密与解密技术方法
- Qt5开发从入门到精通——第六篇四节( 图像与图片——显示SVG格式图片 )
- 学python还是matlab_先学matlab还是python-女性时尚流行美容健康娱乐mv-ida网
- 已解决:Downloading https://ultralytics.com/assets/Arial.ttf to .......ubuntu18.4-YOLOv5报错[01]
- 极路由添加静态路由表_如何将静态TCP / IP路由添加到Windows路由表
- 如何把Word的默认页面颜色由白色改为绿色
- 初学Java简易自助饮品消费系统项目实践
- noi国家集训队论文分类