php滑动拼图验证,如何在PHP环境下实现滑动拼图验证

本文详细介绍了如何在PHP环境下利用GD库实现滑动拼图验证。通过生成拼图轮廓、从原图随机位置抠图并打上水印,以及后端校验用户拖动的位移值来确保验证的安全性和用户体验。
摘要由CSDN通过智能技术生成

今许多的网站都用到了滑动拼图的验证方式,因为它操作非常简单,只需要用户点击鼠标拉动,就能完成验证。减少了用户的输入,比较新颖,大大提高了用户体验的同时,安全性也没有降低。

bf796ee80d05a9e7409b994a524f5206.png

主要类库: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就是圆中心的坐

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值