利用 GD 產生圖片，並斷判 type="image" 的 click 位置是否為指字範圍內
上一篇連結：http://ithelp.ithome.com.tw/question/10126718

在上一篇連結提到，利用 HTML type="image" 取得使用者 click 的 X,Y 座標

本篇，會介紹，利用 GD 產生圖片提供給 type="image" 使用

產生的圖片中，會使用亂數值來設定 Login 按鈕的位置

此功能可以加以阻擋 BOT 的驗證

以下是，產生圖片的程式(以 PHP 為例，使用 GD 函式 , gdImg.php)

session_start();

$imgBG = 'grid.jpg';	//	底圖
$imgLogin = 'login_btn.jpg';	//	登入按鈕圖
$arrData = array() ;

//	載入底圖
$jpgBG = imagecreatefromjpeg($imgBG) ;
$arrData['imgBG']['width'] = imagesx($jpgBG) ;
$arrData['imgBG']['height'] = imagesy($jpgBG) ;

//	載入 login 按鈕
$jpgLogin = imagecreatefromjpeg($imgLogin) ;
$arrData['imgLOGIN']['width'] = imagesx($jpgLogin) ;
$arrData['imgLOGIN']['height'] = imagesy($jpgLogin) ;

// 計算 按鈕 可配置範圍
$arrData['btnRNG']['x_beg'] = 0;
$arrData['btnRNG']['x_end'] = $arrData['imgBG']['width'] - $arrData['imgLOGIN']['width'];
$arrData['btnRNG']['y_beg'] = 0;
$arrData['btnRNG']['y_end'] = $arrData['imgBG']['height'] - $arrData['imgLOGIN']['height'];

//	亂數取按鈕落點 X,Y 座標值
$arrData['btnLOC']['x'] = rand($arrData['btnRNG']['x_beg'], $arrData['btnRNG']['x_end']) ;
$arrData['btnLOC']['y'] = rand($arrData['btnRNG']['y_beg'], $arrData['btnRNG']['y_end']) ;

//	進行圖片組合
imagecopy($jpgBG,$jpgLogin,$arrData['btnLOC']['x'] , $arrData['btnLOC']['y'] , 0 , 0 , $arrData['imgLOGIN']['width'] , $arrData['imgLOGIN']['height']) ;

//	計算合法點擊範圍
$arrData['validRNG']['x_beg'] = $arrData['btnLOC']['x'];
$arrData['validRNG']['x_end'] = $arrData['validRNG']['x_beg'] + $arrData['imgLOGIN']['width'];
$arrData['validRNG']['y_beg'] = $arrData['btnLOC']['y'];
$arrData['validRNG']['y_end'] = $arrData['validRNG']['y_beg'] + $arrData['imgLOGIN']['height'];

$_SESSION['validRNG'] = $arrData['validRNG'];

// printf("%s" , print_r($arrData, true)) ;
// exit;

//	顯示圖片
header('Content-Type: image/jpeg') ;
imagejpeg($jpgBG) ;

//	釋放資源
imagedestroy($jpgBG) ;
imagedestroy($jpgLogin) ;
unset($arrData) ;

exit;

如果直接輸入網址，則會顯示圖片，如下所示：

藍色 log in 圖示，則會依亂數決定放置的位置

在顯示圖片之前，我們也可以檢視一下，所有座標、圖片長寬相關資訊

Array
(
    [imgBG] => Array
        (
            [width] => 267
            [height] => 252
        )

    [imgLOGIN] => Array
        (
            [width] => 48
            [height] => 20
        )

    [btnRNG] => Array
        (
            [x_beg] => 0
            [x_end] => 219
            [y_beg] => 0
            [y_end] => 232
        )

    [btnLOC] => Array
        (
            [x] => 23
            [y] => 176
        )

    [validRNG] => Array
        (
            [x_beg] => 23
            [x_end] => 71
            [y_beg] => 176
            [y_end] => 196
        )

)

前端的部份，只需將圖片的 src 修改則該 php 連結就可以了

<form action="show.php" method="POST" name="frm_find">
    <input id="btnImg" name="btnImg" type="image" src="gdImg.php" />
</form>

之後，在 submit 出去的頁面 show.php 再進行判斷，使用者是否正確點擊 login 的位置

session_start();

printf("%s" , print_r($_POST, true));
printf("%s" , print_r($_SESSION, true));

extract($_POST);
extract($_SESSION['validRNG']);

$pass = false;
if ( ($btnImg_x >= $x_beg && $btnImg_x <= $x_end)  
  && ($btnImg_y >= $y_beg && $btnImg_y <= $y_end) )
  {
	$pass = true;  
  }

var_dump($pass);

如果正確點擊 pass 變數會為 true, else 為 false

show.php 結果如下：

Array
(
    [btnImg_x] => 96
    [btnImg_y] => 170
)
Array
(
    [validRNG] => Array
        (
            [x_beg] => 70
            [x_end] => 118
            [y_beg] => 161
            [y_end] => 181
        )

)
bool(true)

備註：
程式會利用 SESSION 來記錄 login 圖示的位置，以提供 show.php 來判斷。