图片验证

图片验证

前提:

• 熟悉django
• 熟悉html
• 了解ajax

思路

1. 通过PIL绘制图片(可定义字符,北京大小,辨别障碍…)
2. 前端展示图片
3. 用户提交验证码,通过ajax将信息发送至前台进行对比
4. 点击图片刷新(通过传递不同的数据来展示不同的图片)

代码

​ 本章只以图片为例,不带入任何其他数据

#html

#输入验证码
<input type="text" name="user_yzm" id='user_yzm' class="user_yzm" placeholder="请输入图文验证">
#盒子内放置图片
<div id="photo_yzm">
    <img id="yzm" class="yzm" src="/user/verify_code"/>//也可以写成:src="{% url 'user:verify_code' %}"
</div>

示例图

#views
from PIL import Image, ImageDraw, ImageFont
from random

def verify_code(request):
    # 引入随机函数模块
    import random
    def rndColor():
        """
        生成随机颜色
        :return:
        """
        return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))

    # 定义变量，用于画面的背景色、宽、高
    bgcolor = (rndColor())
    width = 100
    height = 37
    # 创建画面对象
    im = Image.new('RGB', (width, height), bgcolor)
    # 创建画笔对象
    draw = ImageDraw.Draw(im)
    # 调用画笔的point()函数绘制噪点
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
        draw.point(xy, fill=fill)
    # 定义验证码的备选值
    str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    # 随机选取4个值作为验证码
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    # 构造字体对象，ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”
    font = ImageFont.truetype('simhei.ttf', 23)
    # 构造字体颜色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    # 绘制4个字
    draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)

    # 写干扰圆圈
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
    # 画干扰线
    for i in range(5):
        x1 = random.randint(0, width)
        y1 = random.randint(0, height)
        x2 = random.randint(0, width)
        y2 = random.randint(0, height)
        draw.line((x1, y1, x2, y2), fill=rndColor())
    # 释放画笔
    del draw
    # 存入session，用于做进一步验证
    request.session['verifycode'] = rand_str
    # 内存文件操作
    buf = BytesIO()
    # 将图片保存在内存中，文件类型为png
    im.save(buf, 'png')
    # 将内存中的图片数据返回给客户端，MIME类型为图片png
    return HttpResponse(buf.getvalue(), 'image/png')


def verify_yz(request):

    user_yzm = request.GET.get('user_yzm')

    verifycode = request.session['verifycode']

    print('user_yzm='+user_yzm)
    print('verifycode='+verifycode)
    if user_yzm == verifycode:
        return restful.ok("OK", data=None)
    else:
        return restful.params_error("验证码错误", data=None)

<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js'%}"></script>
	<script type="text/javascript" src="{% static 'js/register.js' %}"></script>
//ajax
<script>
        $(function(){
            
            var img = $('#yzm');
            //点击图片触发事件
            img.click(function(){
			//获取现在时间,用于每次刷新图片不同
             mydate=new Date();
             //点击却换yzm的src属性.后面加参数是因为每次访问网站之后每次参数不同接收到的图像也不同,如果没有传参数,每次返回的都是相同的图像
             $(this).attr("src",'/user/verify_code?a='+mydate);
            });// img click
		
            var photo_text = $('.user_yzm');
			//验证码图片改变事件
            photo_text.change(function(){
                //ajax
                var user_yzm = $(this).val();
                {#alert(user_yzm);#}
                $.ajax({
                    //获取方式,这边写get,views获取也要写get,所连接到的是本文views中71行,使用POST出现问题请看:https://blog.csdn.net/weixin_43790705/article/details/87867172
                    type: "get",
                    //将数据发送到:
                    url: "{% url 'user:verify_yz' %}",
                    //数据
                    data:"user_yzm="+user_yzm,
                    //数据类型默认为json
                    success: function(msg){
                    {#alert('发送ajax');#}
                    {#obj = eval("("+msg+")");#}
                    alert(msg.code);
					//如果返回的参数的code属性为200那么执行:
                    if(msg.code=='200'){
                         $('#user_yzm').css({"background": "rgba(87,255,53,0.51)"});
                        }
                     //否则
                     else{

                        $('#user_yzm').css({"background": "rgba(255,113,103,0.47)"});
                        }
                }
                })// ajax

            }) //change




        })// $func

    </script>

结果演示:

1.写错误的验证码,返回错误

2.输入框颜色改变

3.后台数据展示

4.数据正确

5.改变颜色

总结

本次加深对ajax的熟练度,以及对数据的掌控!