Verification code function
The translucent watermark mentioned in the previous section only needs to be changed to the following code:
<?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);
Text watermark function:
watermark1.php code is as follows:
<?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_';
//圖片類型和對應(yīng)創(chuàng)建畫布資源的函數(shù)名
$from=array(
'image/gif'=>'imagecreatefromgif',
'image/png'=>'imagecreatefrompng',
'image/jpeg'=>'imagecreatefromjpeg',
);
//圖片類型和對應(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;
//獲取各圖片對應(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 "輸出水印圖片到指定目錄出錯";
return false;
}
}
//使用變量保存原圖片與水印圖片路徑
$source='test.jpg';
$water='C:\Users\Administrator\Desktop.png';
//調(diào)用函數(shù)，顯示原圖與添加水印后的圖片
watermark($source,$water);
?>Effect display:
above For the thinking questions in the previous section, let’s introduce the verification code function in this section:
First, write the user login page
login The .html code is as follows:
<!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> 驗證碼：<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>
Rendering display:
Next, you need to add code. Set and generate the verification code in php, and save it in the session. The specific code.php code is as follows:
<?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īng)的$code的鍵值
if($code_len==1){
$keyCode=array($keyCode);
}
shuffle($keyCode);//打亂數(shù)組
$verifyCode="";
foreach ($keyCode as $key){
$verifyCode.=$code[$key];//真正驗證碼
}
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è)置干擾點
for($i=0;$i<=300;++$i){
//點的隨機顏色
$color=imagecolorallocate($img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
//加300個小點
imagesetpixel($img,mt_rand(0,$img_w),mt_rand(0,$img_h),$color);
}
//為驗證碼加邊框
$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;//驗證碼總長度
//寫入驗證碼
imagestring($img,$code_font,($img_w-$code_sum_w)/2,($img_h-$font_h)/2,$verifyCode,$color2);
//輸出驗證碼圖片格式
header('Content-Type: image/png');
//輸出驗證碼
imagepng($img);
//銷毀畫布
imagedestroy($img);
?>The rendering is as follows:
At this time, the basic verification code has been generated. A new verification code will appear every time it is refreshed. The next thing to do is to verify the verification code. Here, submit it to check .php is processed, and after processing, it returns to the login page
check.php code is as follows:
<?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('驗證碼已過期');
}
//不區(qū)分大小寫驗證
if(strtolower($_SESSION['verifycode'])==strtolower($code)){
echo '驗證碼正確，3秒后返回登錄頁面。。。';
}else{
echo '驗證碼錯誤，3秒后返回登錄頁面。。。';
}
unset($_SESSION['verifycode']);
//3秒后返回登錄頁面
header('refresh:3;url=login.html');The above basic functions have been implemented, but the user wants to change the verification code every time It is very inconvenient to have to refresh the web page. We know that generally there is a "change another page" button behind the verification code on the web page. This function can be implemented through js. You can think about it. (I will introduce it to you in the next section)
