zoukankan      html  css  js  c++  java
  • 7月2日 Django 生成验证码、

    html页面里

    {#  验证码   #}
     <div class="form-group " id="v-code-wrapper">
          <label for="v_code_input">验证码</label>
          <input type="text" class="form-control" id="v_code_input" name="v_code_input">
          <img src="/get_v_code/" class="" id="v_code">
     </div>

     js里

    {#当图片的src改变时,浏览器会自动访问该地址,所以此处点击验证码图片,触发事件改变src地址内容,用以改变验证码图片#}
    $('#v_code').click(function () {
       if (this.src == '/get_v_code/') {
           this.src += '?';
       } else {
           this.src = '/get_v_code/';
       }
    });

    views.py文件里

    # 因为页面控制每次点击图片在连接后加? 或减去?,url一直都是这两个,Django会自动将这两个url的执行加入缓存,所以每次会获得一样的验证图片
    # 该语法糖 告诉系统不要对该方法进行缓存操作
    @never_cache
    def get_v_code(request):
        from PIL import Image, ImageDraw, ImageFont
        import random
    
        # 定义生成一个随机颜色代码的内部函数
        def get_color():
            return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
    
        # 生成一个图片对象
        img_obj = Image.new(
            'RGB',  # 图片格式
            (166, 37),  # 图片大小
            color=get_color()
        )
    
        # 在图片中加文字
    
        # 生成一个画笔对象
        draw_obj = ImageDraw.Draw(img_obj)
    
        # 加载字体文件
        font_obj = ImageFont.truetype('static/font/kumo.ttf', size=28)
    
        # 循环5次,每次往图片上写入一个随机字符
        tmp_list = []
        for i in range(5):
            n = str(random.randint(0, 9))
            l = chr(random.randint(97, 122))
            u = chr(random.randint(65, 90))
    
            r = random.choice([n, l, u])
            tmp_list.append(r)
            draw_obj.text(
                (i * 30 + 10, 0),  # 位置
                r,  # 内容
                get_color(),  # 颜色
                font=font_obj,
            )
        # 得到随机验证码
        v_code = ''.join(tmp_list)
    
        request.session['v_code'] = v_code.upper()
    
        # 第一种,将图片保存到文件(硬盘),然后再返回到页面
        # with open('vv.png', 'wb')as f:
        #     img_obj.save(f, 'png')
        # with open('vv.png', 'rb')as f:
        #     return HttpResponse(f.read(), content_type='imge/png')
    
        # 第二种,直接将图片放在内存中,返回回去
        from io import BytesIO
        tmp = BytesIO()  # 生成一个IO对象
        img_obj.save(tmp, 'png')
    
        data = tmp.getvalue()
        return HttpResponse(data, content_type='imge/png')
  • 相关阅读:
    使用存储过程查询并按每页10条记录分页显示图书借阅纪录
    两个div并排 左边div宽固定 右边自适应
    java比较时间及时间的转换
    java使用commons.io的FileUtils进行文件拷贝
    实现image宽度100%,高度与宽度一致
    vue请求前的loading动画效果
    vue项目加载前空白的动画过渡效果
    element-ui和semantic-ui冲突的解决方法--局部引入semantic-ui的css
    vue使用formdata上传多个图片,springboot以文件数组的形式接受
    快速创建vuepress项目(使用vuepress写文档)
  • 原文地址:https://www.cnblogs.com/95lyj/p/9265825.html
Copyright © 2011-2022 走看看