接下來我們就來做一個網頁端的驗證碼，直接上代碼：
首先來說一下檔案目錄結構：
|----------phpyanzheng 專案檔夾
|----fonttype 檔案夾放字型檔，字型檔一般以 .ttf和.otf結尾
|----1.php 裡面放php語言代碼
|----index.html 裡面放網頁布局
1.php
<?php header('content-type:image/jpeg');//定義一下代碼以jpeg檔案來解析 $width = 120;//定義了映像的寬 $height = 40;//定義了映像的高 $element = array('q','w','e','r','t','y','u','i','o','p','l','k','j','h','g','f','d','s','a','z','x', 'c','v','b','n','m','1','2','3','4','5','6','7','8','9','0','Q','W','E','R','T','Y','U','I','O','P','A' ,'S','D','F','G','H','J','K','L','M','N','B','V','C','X','Z');//定義一個顯示文本的數組 $string = ''; for($i=0;$i<4;$i++){ $string.=$element[rand(0,count($element)-1)];//隨機產生四個文本目標 } $img = imagecreatetruecolor($width, $height);//設定驗證區寬高 $colorBg = imagecolorallocate($img,rand(185,255),rand(185,255),rand(185,255));//產生200-255的隨機數 $colorBorder = imagecolorallocate($img,rand(50,100),rand(50,100),rand(50,100));//邊框顏色 $colorDian = imagecolorallocate($img,rand(0,100),rand(0,100),rand(0,100));//背景小點的顏色 $colorLine = imagecolorallocate($img,rand(0,255),rand(0,255),rand(0,255)); $colorString = imagecolorallocate($img,rand(20,80),rand(20,80),rand(20,80)); imagefill($img, 0, 0, $colorBg);//設定位置和背景顏色 imagerectangle($img,0,0,$width-1,$height-1,$colorBorder);//畫一個邊框 for($i=0;$i<200;$i++){//迴圈出200個幹擾點 imagesetpixel($img, rand(0, $width-1), rand(0, $height-1), $colorDian); } for($i=0;$i<round(5);$i++){//迴圈出5條幹擾線 imageline($img,rand(0,$width/2),rand(0,$height/2),rand($width/2,$width),rand($height/2,$height),$colorLine); } //imagestring($img, 4, 0, 0,'a5dg', $colorString); imagettftext($img,25,rand(5, 15),rand(0,40),39,$colorString,'fonttype/PrincetownStd.otf',$string); // 映像名稱 字型大小 傾斜角度 起始位置X軸 起始位置Y軸 顏色 字型位置 顯示的內容 imagejpeg($img);//輸出映像?>
index.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>孫三峰--驗證碼</title> <script type="text/javascript" src="js/jquery-1.1.0.js" ></script> </head> <body> <!--注意：原文中對應的ip地址是自己電腦端ip，如果不能正常運行，請修改ip--> <p> <label class="lbright">驗證碼：</label> <span> <input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/> <img id="codePic" src="http://192.168.1.113:8601/PHP/phpyanzheng/1.php" width="120" height="40"/> </span> <span id="codePic" onclick="getPic();">看不清楚，換一張</span> <!----> </p> </body> <script type="text/javascript"> function getPic(){ $("#codePic").attr("src","http://192.168.1.113:8601/PHP/phpyanzheng/1.php?flag="+Math.random()); <!--局部重新整理--> }; </script></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
