驗(yàn)證碼功能
上一節(jié)提到的半透明水印只需要改掉以下程式碼即可：
<?php //添加水印 /** * @param resource $src_img 原圖像資源 * @param resource $wat_img 水印圖像資源 * @param int $src_x 水印圖片在原圖像中的橫坐標(biāo) * @param int $src_y 水印圖片在原圖像中的縱坐標(biāo) * @param int $wat_w 水印圖片的寬 * @param int $wat_h 水印圖片的高 */ // imagecopy($src_img,$wat_img,$src_x,$src_y,0,0,$wat_w,$wat_h); //設(shè)置半透明水印 imagecopymerge($src_img,$wat_img,$src_x,$src_y,0,0,$wat_w,$wat_h,50);
文字浮水印功能：
watermark1.php程式碼如下：
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/2/28 0028
* Time: 下午 4:37
*/
header('Content-type:text/html;charset=utf-8');
function watermark($source,$water,$postion=4,$path=''){
//設(shè)置水印圖片名稱前綴
$waterPrefix='water_';
//圖片類型和對(duì)應(yīng)創(chuàng)建畫布資源的函數(shù)名
$from=array(
'image/gif'=>'imagecreatefromgif',
'image/png'=>'imagecreatefrompng',
'image/jpeg'=>'imagecreatefromjpeg',
);
//圖片類型和對(duì)應(yīng)生成圖片的函數(shù)名
$to=array(
'image/gif'=>'imagegif',
'image/png'=>'imagepng',
'image/jpeg'=>'imagejpeg',
);
//獲取原圖和 水印圖片信息數(shù)組
$src_info=getimagesize($source);
$water_info=getimagesize($water);
//從數(shù)組中獲取原圖和水印圖片的寬和高
list($src_w,$src_h,$src_mime)=$src_info;
list($wat_w,$wat_h,$wat_mime)=$water_info;
//獲取各圖片對(duì)應(yīng)的創(chuàng)建畫布函數(shù)名
$src_create_fname=$from[$src_info['mime']];
$wat_create_fname=$from[$water_info['mime']];
//使用可變函數(shù)來創(chuàng)建畫布資源
$src_img=$src_create_fname($source);
$wat_img=$wat_create_fname($water);
//水印位置
switch($postion){
case 1://左上
$src_x=0;
$src_y=0;
break;
case 2://右上
$src_x=$src_w-$wat_w;
$src_y=0;
break;
case 3://中間
$src_x=($src_w-$wat_w)/2;
$src_y=($src_h-$wat_h)/2;
break;
case 4://左下
$src_x=0;
$src_y=$src_h-$wat_h;
break;
default ://右下
$src_x=$src_w-$wat_w;
$src_y=$src_h-$wat_h;
break;
}
//添加水印
/**
* @param resource $src_img 原圖像資源
* @param resource $wat_img 水印圖像資源
* @param int $src_x 水印圖片在原圖像中的橫坐標(biāo)
* @param int $src_y 水印圖片在原圖像中的縱坐標(biāo)
* @param int $wat_w 水印圖片的寬
* @param int $wat_h 水印圖片的高
*/
// imagecopy($src_img,$wat_img,$src_x,$src_y,0,0,$wat_w,$wat_h);
//設(shè)置半透明水印
// imagecopymerge($src_img,$wat_img,$src_x,$src_y,0,0,$wat_w,$wat_h,50);
//設(shè)置字體樣式
$font_style='C:\Windows\Fonts\simsun.ttc';
//設(shè)置文字顏色
$color=imagecolorallocate($src_img,0xff,0x00,0xff);
//生成文字水印
imagefttext($src_img,30,0,0,35,$color,$font_style,'php中文網(wǎng)');
//生成帶水印的圖片路徑
$waterfile=$path.$waterPrefix.$source;
//獲取輸出圖片格式的函數(shù)名
$generate_fname=$to[$src_info['mime']];
//判斷將添加水印后的圖片輸出到指定目錄是否正確
if($generate_fname($src_img,$waterfile)){
//有條理地輸出原圖像與加水印后的圖像
echo "<table><tr><th>為圖片添加水印</th></tr>";
echo "<tr><td>原圖像：</td><td><img src='".$source."'/></td></tr>";
echo "<tr><td>加水印后：</td><td><img src='".$waterfile."'/></td></tr></table>";
}else{
echo "輸出水印圖片到指定目錄出錯(cuò)";
return false;
}
}
//使用變量保存原圖片與水印圖片路徑
$source='test.jpg';
$water='C:\Users\Administrator\Desktop.png';
//調(diào)用函數(shù)，顯示原圖與添加水印后的圖片
watermark($source,$water);
?>
##以上為上一節(jié)的思考題，接下來介紹這一節(jié)的驗(yàn)證碼功能：
首先，編寫使用者登陸頁面
login .html程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="check.php" method="post"> 用戶名：<input type="text" id="username" name="username"/><br> 密碼：<input type="password" id="password" name="password" /><br> 驗(yàn)證碼：<input type="text" id="code" name="code" /><img src="code.php" /><br> <div id="error_message" style="color: red"></div> <input type="submit" id='login' name='login' value="登錄"> </form> </body> </html>
效果圖展示：
接下來就需要在code. php裡對(duì)驗(yàn)證碼進(jìn)行設(shè)定與生成，放入session內(nèi)保存，具體code.php程式碼如下：
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/3/1 0001
* Time: 上午 9:45
*/
$img_w=70; //圖片長度
$img_h=20; //圖片高度
$code_len=5; //長度
$code_font=5; //字體大小
$code=array_merge(range('A','Z'),range('a','z'),range(1,9));//需要用到的數(shù)字或字母
$keyCode=array_rand($code,$code_len);//真正的驗(yàn)證碼對(duì)應(yīng)的$code的鍵值
if($code_len==1){
$keyCode=array($keyCode);
}
shuffle($keyCode);//打亂數(shù)組
$verifyCode="";
foreach ($keyCode as $key){
$verifyCode.=$code[$key];//真正驗(yàn)證碼
}
session_start();
$_SESSION['verifycode']=$verifyCode;
//生成畫布
$img=imagecreatetruecolor($img_w,$img_h);
//畫布的顏色
$bg_color=imagecolorallocate($img,0xcc,0xcc,0xcc);
//畫布背景色
imagefill($img,0,0,$bg_color);
//設(shè)置干擾點(diǎn)
for($i=0;$i<=300;++$i){
//點(diǎn)的隨機(jī)顏色
$color=imagecolorallocate($img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
//加300個(gè)小點(diǎn)
imagesetpixel($img,mt_rand(0,$img_w),mt_rand(0,$img_h),$color);
}
//為驗(yàn)證碼加邊框
$color1=imagecolorallocate($img,0xff,0xff,0xff);//邊框顏色
imagerectangle($img,0,0,$img_w-1,$img_h-1,$color1); //生成邊框
$color2=imagecolorallocate($img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));//字符串顏色
$font_w=imagefontwidth($code_font);
$font_h=imagefontheight($code_font);
$code_sum_w=$font_w*$code_len;//驗(yàn)證碼總長度
//寫入驗(yàn)證碼
imagestring($img,$code_font,($img_w-$code_sum_w)/2,($img_h-$font_h)/2,$verifyCode,$color2);
//輸出驗(yàn)證碼圖片格式
header('Content-Type: image/png');
//輸出驗(yàn)證碼
imagepng($img);
//銷毀畫布
imagedestroy($img);
?>效果圖如下：
這時(shí)基本的驗(yàn)證碼已經(jīng)產(chǎn)生了，每次刷新都會(huì)出現(xiàn)新的驗(yàn)證碼，接下來需要做的就是進(jìn)行驗(yàn)證碼的驗(yàn)證，這裡是透過提交到check .php進(jìn)行處理，處理後返回登入頁面
check.php程式碼如下：
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/3/1 0001
* Time: 上午 10:27
*/
header("Content-Type:text/html;charset=utf-8");
if(empty($_POST)){
die('沒有提交表單');
}else{
$code=isset($_POST['code'])?trim($_POST['code']):'';
}
session_start();
if(empty($_SESSION['verifycode'])){
die('驗(yàn)證碼已過期');
}
//不區(qū)分大小寫驗(yàn)證
if(strtolower($_SESSION['verifycode'])==strtolower($code)){
echo '驗(yàn)證碼正確，3秒后返回登錄頁面。。。';
}else{
echo '驗(yàn)證碼錯(cuò)誤，3秒后返回登錄頁面。。。';
}
unset($_SESSION['verifycode']);
//3秒后返回登錄頁面
header('refresh:3;url=login.html');以上基本功能已經(jīng)實(shí)現(xiàn)，但是使用者想要更換驗(yàn)證碼每次都得刷新網(wǎng)頁這樣很不方便，我們知道一般網(wǎng)頁驗(yàn)證碼後面都有個(gè)'看不清換一張'的按鈕，這個(gè)功能可以透過js來實(shí)現(xiàn)，大家可以思考一下。 (下一節(jié)將為大家介紹)
