php生成图片验证码的实例讲解

本文将通过实例讲解使用PHP生成图片验证码,并介绍生成验证码的函数,需要的朋友可以参考下,本文以实例演示5种验证码,并介绍生成验证码的函数,PHP生成验证码的原理:通过GD库,生成一张带验证码的图片,并将验证码保存在Session中。

1、HTML

5中验证码HTML代码如下:

  1. <div class="demo">
  2. <h3>1、数字验证码</h3>
  3. <p>验证码:<input type="text" class="input" name="code_num" maxlength="4" /> <img src="code_num.php" title="看不清,点击换一张" align="absmiddle" /></p>
  4. <p><input type="button" class="btn" value="提交" /></p>
  5. </div>
  6. <div class="demo">
  7. <h3>2、数字+字母验证码</h3>
  8. <p>验证码:<input type="text" class="input" maxlength="4" /> <img src="code_char.php" title="看不清,点击换一张" align="absmiddle" /></p>
  9. <p><input type="button" class="btn" value="提交" /></p>
  10. </div>
  11. <div class="demo">
  12. <h3>3、中文验证码</h3>
  13. <p>验证码:<input type="text" class="input" maxlength="4" /> <img src="code_zh.php" title="看不清,点击换一张" align="absmiddle" /></p>
  14. <p><input type="button" class="btn" value="提交" /></p>
  15. </div>
  16. <div class="demo">
  17. <h3>4、仿google验证码</h3>
  18. <p>验证码:<input type="text" class="input" maxlength="4" /> <img src="code_gg.php" title="看不清,点击换一张" align="absmiddle" /></p>
  19. <p><input type="button" class="btn" value="提交" /></p>
  20. </div>
  21. <div class="demo">
  22. <h3>5、算术验证码</h3>
  23. <p>验证码:<input type="text" class="input" maxlength="4" /> <img src="code_math.php" title="看不清,点击换一张" align="absmiddle" /></p>
  24. <p><input type="button" class="btn" value="提交" /></p>
  25. </div>

2、js验证

  1. $(function() {
  2. $("#getcode_num").click(function() { //数字验证
  3. $(this).attr("src", 'code_num.php?' + Math.random());
  4. });
  5. $("#chk_num").click(function() {
  6. var code_num = $("#code_num").val();
  7. $.post("chk_code.php?act=num", {
  8. code: code_num
  9. },
  10. function(msg) {
  11. if (msg == 1) {
  12. alert("验证码正确!");
  13. } else {
  14. alert("验证码错误!");
  15. }
  16. });
  17. });
  18. //数字+字母验证
  19. $("#getcode_char").click(function() {
  20. $(this).attr("src", 'code_char.php?' + Math.random());
  21. });
  22. $("#chk_char").click(function() {
  23. var code_char = $("#code_char").val();
  24. $.post("chk_code.php?act=char", {
  25. code: code_char
  26. },
  27. function(msg) {
  28. if (msg == 1) {
  29. alert("验证码正确!");
  30. } else {
  31. alert("验证码错误!");
  32. }
  33. });
  34. });
  35. //中文验证码
  36. $("#getcode_zh").click(function() {
  37. $(this).attr("src", 'code_zh.php?' + Math.random());
  38. });
  39. $("#chk_zh").click(function() {
  40. var code_zh = escape($("#code_zh").val());
  41. $.post("chk_code.php?act=zh", {
  42. code: code_zh
  43. },
  44. function(msg) {
  45. if (msg == 1) {
  46. alert("验证码正确!");
  47. } else {
  48. alert("验证码错误!");
  49. }
  50. });
  51. });
  52. //google验证
  53. $("#getcode_gg").click(function() {
  54. $(this).attr("src", 'code_gg.php?' + Math.random());
  55. });
  56. $("#chk_gg").click(function() {
  57. var code_gg = $("#code_gg").val();
  58. $.post("chk_code.php?act=gg", {
  59. code: code_gg
  60. },
  61. function(msg) {
  62. if (msg == 1) {
  63. alert("验证码正确!");
  64. } else {
  65. alert("验证码错误!");
  66. }
  67. });
  68. });
  69. //算术验证
  70. $("#getcode_math").click(function() {
  71. $(this).attr("src", 'code_math.php?' + Math.random());
  72. });
  73. $("#chk_math").click(function() {
  74. var code_math = $("#code_math").val();
  75. $.post("chk_code.php?act=math", {
  76. code: code_math
  77. },
  78. function(msg) {
  79. if (msg == 1) {
  80. alert("验证码正确!");
  81. } else {
  82. alert("验证码错误!");
  83. }
  84. });
  85. });
  86. });

3、PHP生成验证码

  1. session_start();
  2. getCode(4,60,20);
  3. function getCode($num,$w,$h) {
  4. $code = "";
  5. for ($i = 0; $i < $num; $i++) {
  6. $code .= rand(0, 9);
  7. }
  8. //4位验证码也可以用rand(1000,9999)直接生成
  9. //将生成的验证码写入session,备验证时用
  10. $_SESSION["helloweba_num"] = $code;
  11. //创建图片,定义颜色值
  12. header("Content-type: image/PNG");
  13. $im = imagecreate($w, $h);
  14. $black = imagecolorallocate($im, 0, 0, 0);
  15. $gray = imagecolorallocate($im, 200, 200, 200);
  16. $bgcolor = imagecolorallocate($im, 255, 255, 255);
  17. //填充背景
  18. imagefill($im, 0, 0, $gray);
  19. //画边框
  20. imagerectangle($im, 0, 0, $w-1, $h-1, $black);
  21. //随机绘制两条虚线,起干扰作用
  22. $style = array ($black,$black,$black,$black,$black,
  23. $gray,$gray,$gray,$gray,$gray
  24. );
  25. imagesetstyle($im, $style);
  26. $y1 = rand(0, $h);
  27. $y2 = rand(0, $h);
  28. $y3 = rand(0, $h);
  29. $y4 = rand(0, $h);
  30. imageline($im, 0, $y1, $w, $y3, IMG_COLOR_STYLED);
  31. imageline($im, 0, $y2, $w, $y4, IMG_COLOR_STYLED);
  32. //在画布上随机生成大量黑点,起干扰作用;
  33. for ($i = 0; $i < 80; $i++) {
  34. imagesetpixel($im, rand(0, $w), rand(0, $h), $black);
  35. }
  36. //将数字随机显示在画布上,字符的水平间距和位置都按一定波动范围随机生成
  37. $strx = rand(3, 8);
  38. for ($i = 0; $i < $num; $i++) {
  39. $strpos = rand(1, 6);
  40. imagestring($im, 5, $strx, $strpos, substr($code, $i, 1), $black);
  41. $strx += rand(8, 12);
  42. }
  43. imagepng($im);//输出图片
  44. imagedestroy($im);//释放图片所占内存
  45. }

以上就是本文的全部内容,希望对大家的学习有所帮助。