Python结合PIL实现Flask图片验证码生成与前端验证

#string模块自带数字、字母、特殊字符变量集合，不需要我们手写集合
import string
import random
import os
import uuid

import settings
from PIL import Image, ImageDraw, ImageColor, ImageFilter, ImageFont


class Code(object):
 # 生成随机生成数字或字母
 def random_hexdigits(self, len=1):
 return random.sample(string.hexdigits, len)
 
 # 生成干扰字符
 def punctuation(self, len=1):
 return tuple(random.sample(string.punctuation, len))
 
 # 定义干扰字符颜色
 def random_color(self, min=64, max=255):
 return tuple((random.randint(min, max) for i in range(3)))
 
 # 生成验证码
 def creat_code(self, width=80, height=24, color=(192, 192, 192)):
 image = Image.new('RGB', (width, height), color)
 #建议下载几款字体，变换下风格，我在setting粒定义了static路径，这里就直接导入了
 font = ImageFont.truetype(os.path.join(settings.STATICPATH, 'fonts/Lora-Regular.ttf'), 20)
 draw = ImageDraw.Draw(image)
 self.fill_color(draw, image, 5)
 self.fill_dischar(draw, image, 10)
 code = self.fill_char(draw, image, 4, 10, font)
 image_name = '{}.jpeg'.format(uuid.uuid4().hex)
 image_path = os.path.join(settings.STATICPATH, 'code/{}'.format(image_name))
 print(image_path)
 image.save(image_path)
 return {'code': code, 'image_path': image_path}
 
 # 填充颜色
 def fill_color(self, draw, image, interval):
 for i in range(0, image.width, interval):
  for j in range(0, image.height, interval):
  draw.point((i, j), fill=self.random_color())
 
 # 填充验证码
 def fill_dischar(self, draw, image, interval):
 for i in range(0, image.width, interval):
  dis = self.punctuation()
  j = random.randrange(3, image.height - 3)
  draw.text((i, j), dis[0], fill=self.random_color(64, 255))
 
 # 填充验证码
 def fill_char(self, draw, image, num, interval, font):
 code = ''
 for i in range(num):
  cha = self.random_hexdigits()
  code += str(cha[0])
  j = random.randrange(0, 5)
  # print(cha)
  # print(image.width*(i/num)+interval,j)
  draw.text((image.width * (i / num) + interval, j), cha[0], fill=self.random_color(32, 127), font=font)
 return code


if __name__ == "__main__":
 code = Code()
 print(code.creat_code())

import os
from flask import Flask, Response
from flask import render_template
from utils.code import Code

app = Flask(__name__)


@app.route('/')
def Register():
 return render_template('verify.html')


@app.route('/codes/')
def code():
 infor = Code().creat_code()
 image_path = infor["image_path"]
 code = infor['code']
 
 print(image_path)
 with open(image_path, 'rb') as f:
  image_content = f.read()
 os.remove(image_path)
 return Response(image_content, mimetype='jpeg')


if __name__ == '__main__':
 app.run(debug=True)

 <div class='form-row'>
   <form id="email_register_form" method="post" autocomplete="off">
    <div class="form-group ">
     <label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
     <input type="text" id="id_email" name="email" value="None" placeholder="请输入您的邮箱地址"/>
    </div>
    <div class="form-group ">
     <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
     <input type="password" id="id_password" name="password" value="None" placeholder="请输入6-20位非中文字符密码"/>
    </div>
    <div class="form-group captcha1 ">
     <label>验&nbsp;证&nbsp;码</label>
     <img src="/codes/" alt="captcha" title="点击切换" class="captcha"
       onclick="this.src='codes/?'+Math.random()"/>
     <input autocomplete="off" id="id_captcha_1" name="captcha_1" height="30px" type="text">
    </div>
    <input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册"/>
   </form>