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> 

백 엔 드 코드:

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 += '?')
 });

이상 은 Django 가 랜 덤 그래 픽 인증 코드 를 실현 하 는 예제 의 상세 한 내용 입 니 다.Django 그래 픽 인증 코드 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!