Django之隨機圖形驗證碼

實現效果：點擊右邊圖片驗證碼會變

前端代碼：

<div class="container">
    <div class="row">
        <div class="col-md-6">
             <label for="yzm_id">驗證碼:</label>
             <input type="text" class="form-control" id="yzm_id" placeholder="" name="yzm">
         </div>
        <div class="col-md-6">
             <img id='yzm_img_id' src="/yzm/" alt="" style="width: 260px;height: 40px">
        </div>
     </div>
 <div>    

一個input輸入框和一個用div包裹的img標籤，用Bootstrap的柵格系統各佔6格（只是爲了美觀，能夠不用樣式）

 

後端代碼：

from PIL import Image,ImageDraw,ImageFont
from io import BytesIO,StringIO
#色彩的設置爲(*,*,*)，因此隨機返回三個數
def r_num(number):
   #number爲2指的是背景顏色，把背景顏色和字體顏色分開，否則當顏色同樣時，不容易看到
    if number==2:
        return random.randint(0,128),random.randint(0,128),random.randint(0,128)
    #number==1指的是字體顏色，字體顏色深一些比較養眼
    if number == 1:
        return random.randint(128, 255), random.randint(128, 255), random.randint(128, 255)
def yzm(request):
    #建立一個Image對象，‘RGB’是顏色的模式。第二個參數是驗證碼的大小。第三個參數是三個隨機數，固然也用英語單詞指定顏色，好比red，這裏爲了隨機性選擇了用三個數字
    yzm_img=Image.new("RGB",(260,40),r_num(1))
   #爲yzm_img對象建立一個畫筆
    draw=ImageDraw.Draw(yzm_img)
    #指定字體的格式，ttf文件本身在網上下載，放入static文件夾中，40指的是字體的大小
    font=ImageFont.truetype('static/1.ttf',40)
    #存放驗證碼
    code=''
    #循環5次，因此驗證碼是5位
    for i in range(5):
        #隨機0到9的數字
        random_num=str(random.randint(0,9))
       #隨機65到90的數字，chr是把數字對比ASCLL碼錶轉爲字母。65到90是大寫字母
        random_up=str(chr(random.randint(65,90)))
        #同上，隨機小寫字母
        random_low=str(chr(random.randint(97,122)))
#從三個字符中隨機選取出一個        
 random_code=random.choice([random_num,random_up,random_low])
        #把字符寫入圖片。第一個參數(x,y)，座標，若是座標位置寫死，那麼將會所有擠到一塊兒，第二個參數，指定寫入的字符。第三參數指定字符的格式
        draw.text((45*i,-5),random_code,r_num(2),font)
        code+=random_code
    io_obj=BytesIO()
    #把圖片存放到內存空間中
    yzm_img.save(io_obj,'png')
    #給session中添加驗證碼
    request.session['code']=code
    #返回二進制數據
    return HttpResponse(io_obj.getvalue())

如今刷新就能夠刷新驗證碼了

還差點擊驗證碼就能更換驗證碼

前端腳本代碼：

這裏這麼寫是由於只要在地址後面加上字符，那麼就刷新圖片

 $('#yzm_img_id').click(function () {
        var path2 = $(this).attr('src');
        $(this).attr('src', path2 += '?')
    });