實(shí)現(xiàn)效果：點(diǎn)擊右邊圖片驗(yàn)證碼會變

前端代碼：

<div class='container'> <div class='row'> <div class='col-md-6'> <label for='yzm_id'>驗(yàn)證碼:</label> <input type='text' placeholder='' name='yzm'> </div> <div class='col-md-6'> <img id=’yzm_img_id’ src='https://rkxy.com.cn/yzm/' alt='' style='width: 260px;height: 40px'> </div> </div> <div>

后端代碼：

from PIL import Image,ImageDraw,ImageFontfrom io import BytesIO,StringIO#色彩的設(shè)置為(*,*,*)，所以隨機(jī)返回三個(gè)數(shù)def r_num(number): #number為2指的是背景顏色，把背景顏色和字體顏色分開，不然當(dāng)顏色一樣時(shí)，不容易看到 if number==2: return random.randint(0,128),random.randint(0,128),random.randint(0,128) #number==1指的是字體顏色，字體顏色深一些比較養(yǎng)眼 if number == 1: return random.randint(128, 255), random.randint(128, 255), random.randint(128, 255)def yzm(request): #創(chuàng)建一個(gè)Image對象，‘RGB’是顏色的模式。第二個(gè)參數(shù)是驗(yàn)證碼的大小。第三個(gè)參數(shù)是三個(gè)隨機(jī)數(shù)，當(dāng)然也用英語單詞指定顏色，比如red，這里為了隨機(jī)性選擇了用三個(gè)數(shù)字 yzm_img=Image.new('RGB',(260,40),r_num(1)) #為yzm_img對象創(chuàng)建一個(gè)畫筆 draw=ImageDraw.Draw(yzm_img) #指定字體的格式，ttf文件自己在網(wǎng)上下載，放入static文件夾中，40指的是字體的大小 font=ImageFont.truetype(’static/1.ttf’,40) #存放驗(yàn)證碼 code=’’ #循環(huán)5次，所以驗(yàn)證碼是5位 for i in range(5): #隨機(jī)0到9的數(shù)字 random_num=str(random.randint(0,9)) #隨機(jī)65到90的數(shù)字，chr是把數(shù)字對比ASCLL碼表轉(zhuǎn)為字母。65到90是大寫字母 random_up=str(chr(random.randint(65,90))) #同上，隨機(jī)小寫字母 random_low=str(chr(random.randint(97,122)))#從三個(gè)字符中隨機(jī)選取出一個(gè) random_code=random.choice([random_num,random_up,random_low]) #把字符寫入圖片。第一個(gè)參數(shù)(x,y)，坐標(biāo)，如果坐標(biāo)位置寫死，那么將會全部擠到一起，第二個(gè)參數(shù)，指定寫入的字符。第三參數(shù)指定字符的格式 draw.text((45*i,-5),random_code,r_num(2),font) code+=random_code io_obj=BytesIO() #把圖片存放到內(nèi)存空間中 yzm_img.save(io_obj,’png’) #給session中添加驗(yàn)證碼 request.session[’code’]=code #返回二進(jìn)制數(shù)據(jù) return HttpResponse(io_obj.getvalue())

現(xiàn)在刷新就可以刷新驗(yàn)證碼了

還差點(diǎn)擊驗(yàn)證碼就能更換驗(yàn)證碼

前端腳本代碼：

這里這么寫是因?yàn)橹灰诘刂泛竺婕由献址敲淳退⑿聢D片

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

以上就是Django實(shí)現(xiàn)隨機(jī)圖形驗(yàn)證碼的示例的詳細(xì)內(nèi)容，更多關(guān)于Django 圖形驗(yàn)證碼的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！