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

前端程式碼：

<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="Django實現隨機圖形驗證碼的示例" style="width: 260px;height: 40px">
  </div>
  </div>
 <div> 

後端程式碼：

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)
 #number==1指的是字型顏色，字型顏色深一些比較養眼
 if number == 1:
  return 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 += '?')
 });

以上就是Django實現隨機圖形驗證碼的示例的詳細內容，更多關於Django 圖形驗證碼的資料請關注我們其它相關文章！