php实现拼图滑块验证的思考及部分实现

实现拼图滑块验证，我觉得其中比较关键的一点就是裁剪图片，最起码需要裁剪出下面两张图的样子

底图

滑块图

一张底图和一张滑块图，其中底图实现起来比较简单可以使用添加水印的方式直接将一张拼图形状的半透明图与一张底图合并起来就可以啦，但是实现滑块图就不能够直接使用某个php提供的函数来直接实现啦，但是这也不是不能完成的事情，大致思路如下：

1.准备好拼图形状的一张滑块模型图，例如

然后创建一个相同大小的透明图片

list($width_z, $height_z, $type_z, $attr_z) = getimagesize(滑块模型地址);
$img = imagecreatetruecolor($width_z, $height_z);
imagesavealpha($img, true);
$bg = imagecolorallocatealpha($img, 255, 0, 0, 127);
imagefill($img, 0, 0, $bg);

2.获取底图的像素矩阵（主要获取图片中每个像素的 颜色索引/rgb 的值）

$background = imagecreatefromjpeg(底图图片地址);
list($width_t, $height_t, $type_t, $attr_t) = getimagesize(底图图片地址);
for ($i=0; $i < $width_t; $i++) { 
    for ($j=0; $j < $height_t; $j++) { 
        //获取每个像素的颜色索引值
        $color2 = imagecolorat($background, $i, $j);
    }
}

3.获取滑块模型图的像素矩阵，并获取矩阵中的黑色区域部分的像素点的坐标

list($width_z, $height_z, $type_z, $attr_z) = getimagesize("滑块模型图地址");
$cover = imagecreatefrompng("滑块模型图地址");
for ($i=0; $i < $width_z; $i++) { 
    for ($j=0; $j < $height_z; $j++) { 
        //获取每个像素的颜色索引值
        $color2 = imagecolorat($cover, $i, $j);
        if($color2 == 0){
            //此时的 $i 和 $j 分别表示的是黑色区域的像素点的x,y坐标
        }
    }
}

4.在底图像素矩阵中按照步骤3中获取的坐标结合底图的实际情况获取像素值

5.将步骤4中获取的像素值，逐个设置到步骤1生成的透明图片上，这样滑块图就做好啦

//设置指定图像的xy坐标的颜色索引
bool imagesetpixel ( resource $image , int $x , int $y , int $color )

整体代码：

<?php
//遮盖层
list($width_z, $height_z, $type_z, $attr_z) = getimagesize("cover.png");
$cover = imagecreatefrompng("cover.png");
//创建一个和遮盖层同样大小的图片
$img = imagecreatetruecolor($width_z, $height_z);
imagesavealpha($img, true);
$bg = imagecolorallocatealpha($img, 255, 0, 0, 127);
imagefill($img, 0, 0, $bg);

//背景层
list($width_t, $height_t, $type_t, $attr_t) = getimagesize("background.jpg");

$background = imagecreatefromjpeg("background.jpg");

$width_max = $width_t-$width_z-10;
$height_max = $height_t-$height_z-10;

$width_ini = rand($width_z+10,$width_max);
$height_ini = rand(10,$height_max);

$width_limit = $width_ini + $width_z;
$height_limit = $height_ini + $height_z;

for ($i=$width_ini; $i < $width_limit; $i++) { 
    for ($j=$height_ini; $j < $height_limit; $j++) { 

        $color2 = imagecolorat($background, $i, $j);
        
        //判断索引值区分具体的遮盖区域
        if(imagecolorat($cover, $i-$width_ini, $j-$height_ini) == 0){
            imagesetpixel($img, $i-$width_ini, $j-$height_ini, $color2);
        }


        $color1 = imagecolorat($cover, $i-$width_ini, $j-$height_ini);
        $s = imagecolorallocatealpha($background, 192, 192, 192, 45);
        if($color1 == 0){
            imagesetpixel($background,$i,$j,$s);
        }
        
    }
}

//生成背景图
imagepng($background);
//生成滑块图
imagepng($img);
?>