詳解圖形圖像技術如何生成驗證碼？
阿新 • • 發佈：2017-07-21
mage 隨機數 har 地址 idt session floor oct type
先說一下思路：
（1）先做出基本樣式
（2）用圖像處理技術生成驗證碼，並存session
（3）註意img的路徑，後面要跟一個隨機數，便於每次刷新時，傳的地址都是不一樣的
（4）用form表單把用戶輸入的驗證碼提交給form.php頁面，進行判斷，如果正確返回“輸入正確”，否則，返回“輸入錯誤”，空未做處理。
重點是：
（1）生成驗證碼時，要存一下session；
（2）判斷時，要用session存的驗證碼和用戶輸入的驗證碼進行判斷是否輸入正確；
（3）判斷後，註意返回123.html用的是方法
（4）驗證碼圖片路徑
首先，先寫html頁面：123.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="form.php">
<div class="con3">
<div style="margin:0 8px;font-size: 24px;">
圖片驗證碼
</div>
<div> <input class="con3_1" style="width: 150px;" type="text" name="authcode" value=""/> </div>
<div> <img id="captcha_img" border=‘1‘ src="./captcha.php?r=‘+Math.random();?>" style="width: 80px;height: 46px;margin-left: 10px;"/> </div>
<a href="javascript:void(0)" onclick="document.getElementById(‘captcha_img‘).src=‘./captcha.php?r=‘+Math.random()">換一個？</a>
<input type="submit" value="驗證" />
</div>
</form>
</body>
</html>
<script src="jquery-1.11.2.min.js"></script>
<!--實現點擊圖片刷新驗證碼-->
<script>
$("img").click(function(){
var sjs = Math.floor(Math.random()*100);
$(this).attr("src","./captcha.php?r="+sjs);
})
</script>
其次：輸出驗證碼頁面：captcha.php
<?php
//設置session,必須處於腳本最頂部
session_start();
$image = imagecreatetruecolor(100, 30); //1>設置驗證碼圖片大小的函數
//設置驗證碼顏色 imagecolorallocate(int im, int red, int green, int blue);
$bgcolor = imagecolorallocate($image,255,255,255); //#ffffff
//區域填充 int imagefill(int im, int x, int y, int col) (x,y) 所在的區域著色,col 表示欲塗上的顏色
imagefill($image, 0, 0, $bgcolor);
//設置變量
$captcha_code = "";
//生成隨機數字
for($i=0;$i<4;$i++){
//設置字體大小
$fontsize = 6;
//設置字體顏色，隨機顏色
$fontcolor = imagecolorallocate($image, rand(0,120),rand(0,120), rand(0,120)); //0-120深顏色
//設置數字
$fontcontent = rand(0,9);
//連續定義變量
$captcha_code .= $fontcontent;
//設置坐標
$x = ($i*100/4)+rand(5,10);
$y = rand(5,10);
imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);
}
//存到session
$_SESSION[‘authcode‘] = $captcha_code;
//增加幹擾元素，設置雪花點
for($i=0;$i<200;$i++){
//設置點的顏色，50-200顏色比數字淺，不幹擾閱讀
$pointcolor = imagecolorallocate($image,rand(50,200), rand(50,200), rand(50,200));
//imagesetpixel — 畫一個單一像素
imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);
}
//增加幹擾元素，設置橫線
for($i=0;$i<4;$i++){
//設置線的顏色
$linecolor = imagecolorallocate($image,rand(80,220), rand(80,220),rand(80,220));
//設置線，兩點一線
imageline($image,rand(1,99), rand(1,29),rand(1,99), rand(1,29),$linecolor);
}
//設置頭部，image/png
header(‘Content-Type: image/png‘);
//imagepng() 建立png圖形函數
imagepng($image);
//imagedestroy() 結束圖形函數 銷毀$image
imagedestroy($image);
最後，實現判斷 form.php頁面
<?php
header("Content-Type:text/html;charset=utf-8"); //設置頭部信息
//isset()檢測變量是否設置
if(isset($_REQUEST[‘authcode‘])){
session_start();
//strtolower()小寫函數
if(strtolower($_REQUEST[‘authcode‘])== $_SESSION[‘authcode‘]){
//跳轉頁面
echo "<script language=\"javascript\">";
echo "alert(‘輸入正確!‘);";
echo "document.location=\"./123.html\"";
echo "</script>";
}else{
//提示以及跳轉頁面
echo "<script language=\"javascript\">";
echo "alert(‘輸入錯誤!‘);";
echo "document.location=\"./123.html\"";
echo "</script>";
}
exit();
}
實現效果：
詳看地址：http://www.cnblogs.com/kangshuai/p/5558208.html
詳解圖形圖像技術如何生成驗證碼？