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);
?>