python web框架Flask实现图形验证码及验证码的动态刷新实例

主目录/utils/captcha/__init__.pyimport randomimport string# Image:一个画布# ImageDraw:一个画笔# ImageFont:画笔的字体from PIL import Image, ImageDraw, ImageFont# Captcha验证码class Captcha(object):  # 生成4位数的验证码  numbers = 4  # 验证码图片的宽度和高度  size = (100, 30)  # 验证码字体大小  fontsize = 25  # 加入干扰线的条数  line_number = 2  # 构建一个验证码源文本  SOURCE = list(string.ascii_letters)  for index in range(0, 10):    SOURCE.append(str(index))  # 用来绘制干扰线  @classmethod  def __gene_line(cls, draw, width, height):    begin = (random.randint(0, width), random.randint(0, height))    end = (random.randint(0, width), random.randint(0, height))    draw.line([begin, end], fill=cls.__gene_random_color(), width=2)  # 用来绘制干扰点  @classmethod  def __gene_points(cls, draw, point_chance, width, height):    # 大小限在【0， 100】中    chance = min(100, max(0, int(point_chance)))    for w in range(width):      for h in range(height):        tmp = random.randint(0, 100)        if tmp > 100 - chance:          draw.point((w, h), fill=cls.__gene_random_color())  # 生成随机颜色  @classmethod  def __gene_random_color(cls, start=0, end=255):    random.seed()    return (random.randint(start, end),        random.randint(start, end),        random.randint(start, end))  # 随机选择一个字体  @classmethod  def __gene_random_font(cls):    fonts = [      "PAPYRUS.TTF",      "CENTAUR.TTF",      "Inkfree.ttf",      "verdana.ttf",    ]    font = random.choice(fonts)    return "utils/captcha/"+font  # 用来随机生成一个字符串（包括英文和数字）  @classmethod  def gene_text(cls, numbers):    # numbers是生成验证码的位数    return " ".join(random.sample(cls.SOURCE, numbers))  # 生成验证码  @classmethod  def gene_graph_captcha(cls):    # 验证码图片的宽高    width, height = cls.size    # 创建图片    image = Image.new("RGBA", (width, height), cls.__gene_random_color(0, 100))    # 验证码的字体    font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)    # 创建画笔    draw = ImageDraw.Draw(image)    # 生成字符串    text = cls.gene_text(cls.numbers)    # 获取字体的尺寸    font_width, font_height = font.getsize(text)    # 填充字符串    draw.text(((width-font_width)/2, (height-font_height)/2),         text, font=font, fill=cls.__gene_random_color(150, 255))    # 绘制干扰线    for x in range(0, cls.line_number):      cls.__gene_line(draw, width, height)    # 绘制干扰点    cls.__gene_points(draw, 10, width, height)    with open("captcha.png", "wb") as fp:      image.save(fp)    return text, image

主目录/common/views.py@bp.route("/captcha")def graph_captcha():  """  使用定义好的图形验证码类，来制作验证码  以验证码为键、验证码为值（为了用户的体验，让其忽略大小写）存储在redis缓存中  通过BytesIO字节流的方式保存和访问图片  :return: 图片响应  """  # 获取验证码  text, image = Captcha.gene_graph_captcha()  cpcache.set(text.lower(), text.lower())  # BytesIO:字节流  out = BytesIO()  # 保存图片  image.save(out, "png")  # 存储完图片，将文件的指针指向文件头，使下次保存图片能覆盖前面保存的图片，节省空间  out.seek(0)  # 访问图片，并将其作为一个响应返回给前台  resp = make_response(out.read())  resp.content_type = "image/png"  return resp

<div class="form-group">  <div class="input-group">    <input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码">    <span class="input-group-addon captcha-addon">      <img id="captcha-img" class="captcha-img" src="{{ url_for("common.graph_captcha") }}" alt="">    </span>  </div></div>

这个文件放在公共的目录下就可以了var cpparam = {  setParam: function(href, key, value){    //重新加载整个页面    var isReplaced = false;    var urlArray = href.split("?");    if(urlArray.length > 1){      var queryArray = urlArray[1].split("&");      for(var i=0; i < queryArray.length; i++){        var paramArray = queryArray[i].split("=");        if(paramArray[0] == key){          paramArray[1] = value;          queryArray[i] = paramArray.join("=");          isReplaced = true;          break;        }      }      if(!isReplaced){        var params = {};        params[key] = value;        if(urlArray.length > 1){          href = href + "$" + $.param(params);        }else{          href = href + "?" + $.param(params);        }      }else{        var params = queryArray.join("&");        urlArray[1] = params;        href = urlArray.join("?");      }    }else{      var param = {};      param[key] = value;      if(urlArray.length > 1){        href = href + "$" + $.param(param);      }else{        href = href + "?" + $.param(param);      }    }    return href;  }};

$(function(){  $("#captcha-img").on("click", function(){    var self = $(this);    var src = self.attr("src");    var newsrc = cpparam.setParam(src, "xx", Math.random());    self.attr("src", newsrc);  });});