以前总是觉得图片验证码很诡秘的，但是今天看了看网上的教程，发现并不像想象中那么难，PHP5具体实现如下。createphoto.php文件用来生成图片验证码，并通过session向test.php传递验证码内容；而test.php则在表单中引用生成的图片和验证用户的输入。


代码实现（PHP5）

<?php
#createphoto.php
#启用session
session_start();
#生成4个随机字符
$ary = 'qwertyuiopasdfghjklzxcvbnm0123456789';
for ($i = 0; $i < 4; $i++) {
    $index = rand(0, 35);
    $rundstr .= $ary[$index];
}
#把随机数保存到session
$_SESSION[rundstr] = $rundstr;
#图片尺寸
$x_size = 100;
$y_size = 30;
#新建一个真彩色图像
$img = imagecreate($x_size, $y_size);
#生成各种颜色
imagecolorallocate($img, 230, 230, 230); #设置图片的背景色
$fontcolor = imagecolorallocate($img, 0, 0, 0); #生成字体的颜色
$pointcolor = imagecolorallocate($img, 0, 0, 0); #生成噪点的颜色
#添加200个噪点
for ($i = 0; $i < 200; $i++) {
    imagesetpixel($img, rand(0, $x_size), rand(0, $y_size), $pointcolor);
}
//添加5条干扰线
for ($i = 0; $i < 5; $i++) {
    $linecolor = imagecolorallocate($img, rand(0, 225), rand(0, 225), rand(0, 225)); #生成干扰线的颜色
    imageline($img, rand(0, 100), 0, rand(0, 100), rand(0, 30), $linecolor);
}
#绘图
imagestring($img, 6, rand(0, 30), rand(5, 12), $rundstr, $fontcolor);
//显示图片
header("Content_type:image/jpeg");
imagejpeg($img);
?>



<?php
#test.php
#启动session
session_start();
#验证
if ($_POST[inputvalue]) {
    if ($_POST[inputvalue] == $_SESSION[rundstr]) {
        echo "成功";
    } else {
        echo "失败";
    }
}
?>
<form action="" method="post">
  <input type="text" name="inputvalue" size="20"></input>
  <img src=\'#\'" /img></br>
  <input type="submit" name="submit" value="确定"></input>
</form>



运行效果

访问test.php，输入6q94，点击确定；




说明
1、首先要启动gd库，可通过WampServer（PHP -> PHP扩展 -> php_gd2），或修改PHP.ini文件（去掉extension=php_gd2.dll前的"；"号）；
2、imagecreate ( int x_size, int y_size ) // 创建图像，返回图像对象，x就是宽 ，y就是高；
3、imagecolorallocate ( resource image, int red, int green, int blue ) // 第一次调用是为图像设置颜色，返回颜色的值；
4、imagestring ( resource image, font, int x, int y, 内容 , 颜色 ) // 绘图；
5、rand( int x, int y ) // 生成随机数，范围[x , y]闭区间；
6、imagesetpixel ( resource image, int x, int y, int color ) // 画点，xy是点在图像中的坐标；
7、imageline ( resource image, int x1, int y1, int x2, int y2, int color ) // 画线，x1y1是起始点坐标，x2y2是终点坐标；
8、header("Content_type:image/jpeg") // 说明文件类型
9、imagejpeg($img) //　显示图片


本文出自 “清源教育” 博客，转载请注明此处，谢谢！

实现思路：
1.用户访问页面/login/

- 创建一个图片验证码给用户，让用户输入验证码上的字符串

- 在验证码存在session中

2.用户提交之后的操作：

- 验证是否是Post提交

- 判断用户输入的验证码是否和图片上的验证码一致
我们应该怎样实现呢？

在验证码方便我们要使用Image模块（pip install Pillow）
呈上步奏：

urls.py
from django.contrib import admin
from django.urls import path,re_path
from app import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/',views.login),
    path('check_code/',views.check_code),
]

utils/check_code.py
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont
import random

class ValidCodeImg:
    def __init__(self,width=150,height=30,code_count=5,font_size=32,point_count=20,line_count=3,img_format='png'):
        '''
        可以生成一个经过降噪后的随机验证码的图片
        :param width: 图片宽度 单位px
        :param height: 图片高度 单位px
        :param code_count: 验证码个数
        :param font_size: 字体大小
        :param point_count: 噪点个数
        :param line_count: 划线个数
        :param img_format: 图片格式
        :return 生成的图片的bytes类型的data
        '''
        self.width = width
        self.height = height
        self.code_count = code_count
        self.font_size = font_size
        self.point_count = point_count
        self.line_count = line_count
        self.img_format = img_format

    @staticmethod
    def getRandomColor():
        '''获取一个随机颜色(r,g,b)格式的'''
        c1 = random.randint(0,255)
        c2 = random.randint(0,255)
        c3 = random.randint(0,255)
        return (c1,c2,c3)

    @staticmethod
    def getRandomStr():
        '''获取一个随机字符串，每个字符的颜色也是随机的'''
        random_num = str(random.randint(0, 9))
        random_low_alpha = chr(random.randint(97, 122))
        random_upper_alpha = chr(random.randint(65, 90))
        random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])
        return random_char


    def getValidCodeImg(self):
        # 获取一个Image对象，参数分别是RGB模式。宽150，高30，随机颜色
        image = Image.new('RGB',(self.width,self.height),self.getRandomColor())

        # 获取一个画笔对象，将图片对象传过去
        draw = ImageDraw.Draw(image)

        # 获取一个font字体对象参数是ttf的字体文件的目录，以及字体的大小

        font=ImageFont.truetype('C:/Windows/Fonts/Arial.ttf',size=self.font_size)

        temp = []
        for i in range(self.code_count):
            # 循环5次，获取5个随机字符串
            random_char = self.getRandomStr()

            # 在图片上一次写入得到的随机字符串,参数是：定位，字符串，颜色，字体
            draw.text((10+i*30, -2),random_char , self.getRandomColor(), font=font)

            # 保存随机字符，以供验证用户输入的验证码是否正确时使用
            temp.append(random_char)
        valid_str = "".join(temp)

        # 噪点噪线
        # 划线
        for i in range(self.line_count):
            x1=random.randint(0,self.width)
            x2=random.randint(0,self.width)
            y1=random.randint(0,self.height)
            y2=random.randint(0,self.height)
            draw.line((x1,y1,x2,y2),fill=self.getRandomColor())

        # 画点
        for i in range(self.point_count):
            draw.point([random.randint(0, self.width), random.randint(0, self.height)], fill=self.getRandomColor())
            x = random.randint(0, self.width)
            y = random.randint(0, self.height)
            draw.arc((x, y, x + 4, y + 4), 0, 90, fill=self.getRandomColor())

        # 在内存生成图片
        from io import BytesIO
        f = BytesIO()
        image.save(f, self.img_format)
        data = f.getvalue()

        return data,valid_str

views.py
from django.shortcuts import render,HttpResponse
from utils.check_code import ValidCodeImg

def check_code(request):
    img = ValidCodeImg()
    data, valid_str = img.getValidCodeImg()
    print(valid_str)
    request.session['check'] = valid_str
    return HttpResponse(data,valid_str)

def login(request):
    if request.method == 'POST':
        check = request.POST.get('check')
        print(check)
        if check.upper() == request.session['check']:
            print('验证通过')
        else:
            print('验证失败')
    return render(request,"login.html")

login.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Login</title>
		<link rel="stylesheet" href="/static/bootstrap.css">
		<style>
			body{
				margin: 20px 0px;
			}

			#a1{
				display: inline-block;
				border:2px solid aqua;
				border-radius: 10px;
				margin-bottom:16px;

			}
		</style>
	</head>

	<body>


		<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-labelledby="loginModalLable" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h1 class="text-center text-primary">登录</h1>
					</div>
					<div class="modal-body">
						<form action="/login/" class="form  center-block" method="post">
							<div class="form-group col-md-12">
								<input type="email" class="form-control input-lg" placeholder="电子邮件" name="email">
							</div>
							<div class="form-group col-md-12">
								<input type="password" class="form-control input-lg" placeholder="登录密码" name="pwd">
							</div>

							<div class="form-group col-md-6">
								<input type="text" class="form-control input-lg" placeholder="图片验证码" name="check">

							</div>
							<a href="/login?/" class="col-md-6;border" id="a1"><img style="width: 250px;height:50px" src="/check_code/"></a>
							<div class="form-group">
								<button class="btn btn-primary btn-lg btn-block">立刻登录</button>
								<span><a href="#">找回密码</a></span>
								<span><a href="#" class="pull-right">注册</a></span>
							</div>
						</form>

					</div>
					<div class="modal-footer">

					</div>
				</div>
			</div>
		</div>
		<script src="/static/jquery-1.12.4.js"></script>
		<script src="/static/bootstrap.js"></script>
		<script>
			$('#loginModal').modal("show");
		</script>
	</body>

</html>


数据库方便就没有进行详细的写，可以在项目中写完整，本文主要测试图片验证码。

上面代码最终实现图：



在实现中也遇到了一个小问题可以看：https://blog.csdn.net/qq_42992704/article/details/104459548 。

这样我们就完成了，验证码的这个功能，感兴趣的话，可以自己做下测试。

        static public byte[] Img_字符(string 字符, int widTh, int higHt)

        {

            System.Drawing.Font ft = new System.Drawing.Font("Tohoma", 10);

            System.Drawing.Bitmap bm = new System.Drawing.Bitmap(widTh, higHt);

            System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bm);

            gr.FillRectangle(System.Drawing.SystemBrushes.WindowText, new System.Drawing.Rectangle(new System.Drawing.Point(0, 0), bm.Size));

            System.Drawing.SizeF sf = gr.MeasureString(字符, ft);

            float w = (sf.Width);

            float h = (sf.Height);

            w = (widTh / 2 / 2 / 1.5F);

            h = (higHt - h) / 2;

            gr.DrawString(字符, ft, new System.Drawing.SolidBrush(System.Drawing.Color.Red), new System.Drawing.PointF(w, h));

            System.IO.MemoryStream ms = new System.IO.MemoryStream();

            bm.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);

            System.IO.BinaryReader br = new System.IO.BinaryReader(ms);

            ms.Position = 0;

            byte[] bs = br.ReadBytes((int)ms.Length);

            br.Close();

            ms.Close();

            return bs;

        }

     现在许多网站的登陆都需要输入验证码，验证码一般都是以图片的形式显示的。这样一来，能提高登陆的安全性，防止暴力猜解密码。为何要用图片显示验证码？试想，如果只是生成文本的验证码，破解人可以利用类似于小偷的技术，先把你这个页面读取，然后分析出验证码，最后进行暴力猜解。这样的话，验证码就没有任何 实际意义了。废话少说，下面我就开始说一说怎样实现asp中显示图片验证码。 
要实现asp中显示图片验证码，首先需要以下三个文件： 
GetCode.asp (用于生成图片验证码) 
head.fix (图片头) 
body.fix (图片主体) 
你也许会问，这些文件我从哪里可以得到呢？不用着急，这些文件在dvbbs7.0里面有。我也是在研究了dvbbs7.0里面的验证码之后才学会如何使用图片验证码的。 
首先看getcode.asp文件，里面有几行是这样的： 
Ados.LoadFromFile(Server.mappath("body.Fix")) 
Ados1.write Ados.read(1280) 
For i=0 To 3 
Ados.Position=(9-zimg(i))*320 
Ados1.Position=i*320 
Ados1.write ados.read(320) 
Next 
Ados.LoadFromFile(Server.mappath("head.fix")) 
看到body.fix和head.fix了吗？这里指的是他们与getcode.asp的相对位置。如果他们三个文件在一个目录里面，就按照以上的写法就可 以了。如果不是，就需要写出他俩与getcode.asp的相对位置。比如：如果getcode.asp在根目录下，body.fix& head.fix在根目录下的test文件夹下，那么，上面的代码就需改为： 
Ados.LoadFromFile(Server.mappath("test/body.Fix")) 
Ados1.write Ados.read(1280) 
For i=0 To 3 
Ados.Position=(9-zimg(i))*320 
Ados1.Position=i*320 
Ados1.write ados.read(320) 
Next 
Ados.LoadFromFile(Server.mappath("test/head.fix")) 
这样，才能保证图片显示的正常。 
如何调用？ 
很简单，只需要这样： 
<img src=getcode.asp border=0> 
即可。 
每当在调用getcode.asp之后，会自动生成一个session,这个session存储着和验证图片上显示的一样的四位数字。你只需把接收到的验证码和这个session比较，然后判断验证码是否输入正确。当然，最好像这样： 
If Cstr(Trim(接收的变量名))=Cstr(Session("GetCode")) Then 
Response.Write ("OK!") 
Else 
Response.Write ("No!") 
End If 
呵呵，至此，完毕。希望你在看完本文后有所启发。当然，本人水平有限，文中难免出现错误，欢迎大家指正。 
有人可能要问，图片能不能修改啊，答案是肯定的，网上有相关文章，你可以去查查。  
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/flashlm/archive/2007/07/07/1682320.aspx