推導步驟1:在img標簽的src屬性里放上驗證碼的請求路徑
補充1.img的src屬性:
1.圖片路徑
2.url
3.圖片的二進制資料
補充2:字體樣式
我們計算機上之所以可以輸出各種各樣的字體樣式,其內部其實對應的是一個個以.ttf結尾的檔案
由于img的src屬性里可以放圖片的二進制資料,因此我們可以在src里放上圖片的請求路徑,回傳的是一個圖片的二進制資料
<img src="https://www.cnblogs.com/get_code/" alt="" height="35">
# 該視圖函式回傳的是圖片的二進制資料,圖片是本地已有的圖片路徑
def get_code(request):
with open ('static/img/default.png','rb') as f:
data = https://www.cnblogs.com/suncolor/p/f.read()
return HttpResponse(data)
字體樣式網站
推導步驟2:利用pillow模塊動態產生圖片
"""
圖片相關的模塊:
pip3 install pillow
匯入:from PIL import Image,ImageDraw,ImageFont
Image:生成圖片
ImageDraw:能夠在圖片上亂涂亂畫
ImageFont:控制字體樣式
"""
from PIL import Image,ImageDraw,ImageFont
import random
def get_random():
return random.randint(0,255),random.randint(0,255),random.randint(0,255),
def get_code(request):
1.先產生一個圖片,new方法的第一個引數是固定模式RGB格式,第二個是圖片大小(寬,高),第三個是圖片顏色(可以放rgb模式的顏色)
# image_obj = Image.new('RGB',(350,35),'green') # 固定顏色
# image_obj = Image.new('RGB',(350,35),(23,43,53)) # 變形1
image_obj = Image.new('RGB', (350, 35), get_random()) # 變形2
2.將產生的圖片存起來,打開一個檔案,該圖片有一個save方法可以存盤圖片,第一個引數是檔案句柄,第二個是存盤圖片格式
with open('xxx.png','wb') as f:
image_obj.save(f,'png')
3.再將圖片以二進制形式讀出來,回傳給img標簽的src屬性
with open('xxx.png','rb') as f:
data = https://www.cnblogs.com/suncolor/p/f.read()
return HttpResponse(data)
上述方法:會進行頻繁的檔案存盤IO操作,效率比較低下,步驟4利用記憶體管理器模塊優化!
推導步驟4:利用記憶體管理器模塊優化
"""
匯入記憶體管理器模塊:from io import BytesIO,StringIO
BytesIO:功能臨時幫記憶體儲資料,回傳的資料是二進制
StringIO:功能臨時幫記憶體儲資料,回傳的資料是字串
"""
def get_code(request):
# 1.同樣先生成一個圖片物件
image_obj = Image.new('RGB', (350, 35), get_random())
# 2.這里再生成一個記憶體管理器物件,就可以看成是f檔案句柄
io_obj = BytesIO()
# 3.將圖片保存到檔案管理器物件里
image_obj.save(io_obj,'png')
# 4.把圖片從檔案管理器物件里取出來,用getvalue()方法
return HttpResponse(io_obj.getvalue())
最終步驟:寫圖片驗證碼
def get_code(request):
# 1.同樣先生成一個圖片物件
image_obj = Image.new('RGB', (350, 35), get_random())
# 2.在圖片上生成一個畫筆物件
img_draw = ImageDraw.Draw(image_obj)
# 3.設定字體樣式,truetype()第一個引數是字體樣式路徑,第二個是字體大小
img_font = ImageFont.truetype('static/font/222.ttf',30)
# 4.隨機生成驗證碼,五位,大小寫字母、數字
code = ''
for i in range(5):
random_upper = chr(random.randint(65,90)) # 65-90的數字使用chr()函式對應轉成大寫字母
random_lower = chr(random.randint(97,122)) # 97-122的數字使用chr()函式對應轉成小寫字母
random_int = str(random.randint(0,9))
# 從上面三種隨機選擇一種
tmp = random.choice([random_int,random_lower,random_upper])
# 將產生的隨機字串寫到圖片上
"""
text()方法的第一個引數,字串在圖片上的坐標,第二個是字串,
第三個字串的顏色,第四個字體樣式和大小
"""
img_draw.text((i*60,0),tmp,get_random(),img_font)
code += tmp
print(code)
# 5.將生成的隨機驗證碼保存起來,因為在登錄的視圖函式需要用到,進行比對
request.session['code'] = code
# 6.再生成一個記憶體管理器物件,就可以看成是f檔案句柄
io_obj = BytesIO()
# 7.將圖片保存到檔案管理器物件里
image_obj.save(io_obj,'png')
# 8.把圖片從檔案管理器物件里取出來,用getvalue()方法
return HttpResponse(io_obj.getvalue())
補充
如何讓用戶一點驗證碼圖片就重繪驗證碼
<img src="https://www.cnblogs.com/get_code/" alt="" height="35" id="img">
<script>
$('#img').click(function (){
let OldUrl = $(this).attr('src')
$(this).attr('src',OldUrl += '?')
})
</script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/508926.html
標籤:Python
