主目錄/utils/captcha/__init__.py

import random
import string

# Image:一個(gè)畫布
# ImageDraw:一個(gè)畫筆
# ImageFont:畫筆的字體
from PIL import Image, ImageDraw, ImageFont


# Captcha驗(yàn)證碼
class Captcha(object):
  # 生成4位數(shù)的驗(yàn)證碼
  numbers = 4
  # 驗(yàn)證碼圖片的寬度和高度
  size = (100, 30)
  # 驗(yàn)證碼字體大小
  fontsize = 25
  # 加入干擾線的條數(shù)
  line_number = 2

  # 構(gòu)建一個(gè)驗(yàn)證碼源文本
  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)

  # 用來繪制干擾點(diǎn)
  @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())

  # 生成隨機(jī)顏色
  @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))

  # 隨機(jī)選擇一個(gè)字體
  @classmethod
  def __gene_random_font(cls):
    fonts = [
      "PAPYRUS.TTF",
      "CENTAUR.TTF",
      "Inkfree.ttf",
      "verdana.ttf",
    ]
    font = random.choice(fonts)
    return "utils/captcha/"+font

  # 用來隨機(jī)生成一個(gè)字符串（包括英文和數(shù)字）
  @classmethod
  def gene_text(cls, numbers):
    # numbers是生成驗(yàn)證碼的位數(shù)
    return " ".join(random.sample(cls.SOURCE, numbers))

  # 生成驗(yàn)證碼
  @classmethod
  def gene_graph_captcha(cls):
    # 驗(yàn)證碼圖片的寬高
    width, height = cls.size
    # 創(chuàng)建圖片
    image = Image.new("RGBA", (width, height), cls.__gene_random_color(0, 100))
    # 驗(yàn)證碼的字體
    font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)
    # 創(chuàng)建畫筆
    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)
    # 繪制干擾點(diǎn)
    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():
  """
  使用定義好的圖形驗(yàn)證碼類，來制作驗(yàn)證碼
  以驗(yàn)證碼為鍵、驗(yàn)證碼為值（為了用戶的體驗(yàn)，讓其忽略大小寫）存儲(chǔ)在redis緩存中
  通過BytesIO字節(jié)流的方式保存和訪問圖片
  :return: 圖片響應(yīng)
  """
  # 獲取驗(yàn)證碼
  text, image = Captcha.gene_graph_captcha()
  cpcache.set(text.lower(), text.lower())

  # BytesIO:字節(jié)流
  out = BytesIO()
  # 保存圖片
  image.save(out, "png")
  # 存儲(chǔ)完圖片，將文件的指針指向文件頭，使下次保存圖片能覆蓋前面保存的圖片，節(jié)省空間
  out.seek(0)
  # 訪問圖片，并將其作為一個(gè)響應(yīng)返回給前臺(tái)
  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="圖形驗(yàn)證碼">
    <span class="input-group-addon captcha-addon">
      <img id="captcha-img" class="captcha-img" src="{{ url_for("common.graph_captcha") }}" alt="">
    </span>
  </div>
</div>

這個(gè)文件放在公共的目錄下就可以了

var cpparam = {
  setParam: function(href, key, value){
    //重新加載整個(gè)頁面
    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);
  });
});