图片相关的模块 #pip3 install pillow from PIL import Image,ImageDraw,ImageFont """ Image:生成图片 ImageDraw:能够在图片上乱写乱画 ImageFont:控制字体样式 """ from io import BytesIO,StringIo """ 内存管理器模块 BytesIO:临时帮你存储数据 返回的数据是二进制 StringIO:临时帮你存储数据 返回的数据是字符串 """ import random def get_random(): return random.randint(0,255),random.randint(0,255),random.randint(0,255) #推导步骤1：直接获取后端现成的图片二进制数据发送给前端 def get_code(request): with open(r'static/img/1.jpg','rb')as f: data=f.read() return HttpResponse(data) #推导步骤2：利用pillow模块动态产生图片 def get_code(request): # img_obj=Image.new('RGB',(400,40),'yellow') # img_obj=Image.new('RGB',(400,40),(23,54,78)) img_obj=Image.new('RGB',(400,40),get_random()) #先将图片对象保存起来 with open('xxx.png','wb')as f: img_obj.save(f,'png') #在将图片对象读取出来 with open('xxx.png','rb')as f: data=f.read() return HttpResponse(data) #推导步骤3 ：文件存储繁琐IO效率低 借助内存管理器模块 def get_code(request): img_obj=Image.new('RGB',(400,40),get_random()) io_obj=BytesIO()#生成一个内存管理器对象 你可以看成是文件句柄 img_obj.save(io_obj,'png') return HttpResponse(io_obj.getvalue())#从内存管理器中读取二进制的图片数据返回给前端 #推导步骤4:写图片验证码 # 我们的计算机上面能够输出各种各样的字体样式，内部其实对应的是一个个.ttf结尾的文件 def get_code(request): img_obj = Image.new('RGB', (400, 40), get_random()) img_draw=ImageDraw.Draw(img_obj)#产生一个画笔对象 img_font=ImageFont.truetype('static/font/11.ttf',30)#字体样式 大小 #随机验证码 五位数随机验证码 数字 小写字母 大写字母 code='' for i in range(5): random_upper=chr(random.randint(65,90)) random_lower=chr(random.randint(97,122)) random_int=str(random.randint(0,9)) #从上面3个里面随机选一个 tmp=random.choice([random_upper,random_lower,random_int]) #将产生的随机字符串写入到图片上 """ 为什么一个个写不是生成好了在写 因为一个个写能够控制每个字体的间隙 而生成好之后再写没法控制字体的间距了 """ img_draw.text((i*45+60,-1),tmp,get_random(),img_font) #拼接随机字符串 code+=tmp print(code) #随机验证码在登录的视图函数里面需要用到 要比对 所有要找个地方存起来并且其他视图函数也能拿到 request.session['code']=code io_obj=BytesIO() img_obj.save(io_obj,'png') return HttpResponse(io_obj.getvalue()) """前端""" <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1 class="text-center">登录页面</h1> <div class="form-group"> <label for="username">用户名</label> <input type="text" name="username" id="username" class="form-control"> </div> <div class="form-group"> <label for="password">密码</label> <input type="text" name="password" id="password" class="form-control"> </div> <div class="form-group"> <label for="">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" name="code" id="is_code" class="form-control"> </div> <div class="col-md-6"> <img src="/get_code/" alt="" id="id_img" width="400" height="40"> </div> </div> </div> <input type="button" class="btn btn-success" value="登录"> </div> </div> </div> <script> $('#id_img').click(function () { //1 先获取标签之前的src let oldVal = $(this).attr('src'); $(this).attr('src', oldVal += '?') }) </script>