今许多的网站都用到了滑动拼图的验证方式,因为它操作非常简单,只需要用户点击鼠标拉动,就能完成验证。减少了用户的输入,比较新颖,大大提高了用户体验的同时,安全性也没有降低。
主要类库: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就是圆中心的坐