1. 程式人生 > >django項目驗證碼(PIL庫實現)

django項目驗證碼(PIL庫實現)

inux 構造 text 噪點 刷新 背景 font 項目 技術分享

作個記錄,這個東東,是可以到處照搬的。

WINDOWS下和LINUX下,字體對象獲取方式不一樣。

為了用戶體驗,字體大小也重要的。

另外,為了照顧個別字母認不出來的人,提供刷新功能。

一,驗證碼函數

def verify_code(request):
    from PIL import Image, ImageDraw, ImageFont
    # 引入隨機函數模塊
    import random
    # 定義變量,用於畫面的背景色、寬、高
    bgcolor = (random.randrange(40, 200), random.randrange(
        
40, 200), 255) width = 200 height = 40 # 創建畫面對象 im = Image.new(RGB, (width, height), bgcolor) # 創建畫筆對象 draw = ImageDraw.Draw(im) # 調用畫筆的point()函數繪制噪點 for i in range(0, 100): xy = (random.randrange(0, width), random.randrange(0, height)) fill = (random.randrange(0, 255), 255, random.randrange(0, 255)) draw.point(xy, fill
=fill) # 定義驗證碼的備選值 str1 = ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0 # 隨機選取4個值作為驗證碼 rand_str = ‘‘ for i in range(0, 4): rand_str += str1[random.randrange(0, len(str1))] # 構造字體對象,一個默認的(字體太小),一個LINUX下的,一個WINDOWS下的。23號可以了。 # font = ImageFont.load_default().font #
font = ImageFont.truetype(‘/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf‘, 23) font = ImageFont.truetype(C:\Windows\Fonts\Arial.ttf, 23) # 構造字體顏色 fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255)) # 繪制4個字,要註意間距 draw.text((20, 10), rand_str[0], font=font, fill=fontcolor) draw.text((70, 10), rand_str[1], font=font, fill=fontcolor) draw.text((120, 10), rand_str[2], font=font, fill=fontcolor) draw.text((170, 10), rand_str[3], font=font, fill=fontcolor) # 釋放畫筆 del draw # 存入session,用於做進一步驗證 request.session[verify_code] = rand_str # 內存文件操作 import io buf = io.BytesIO() # 將圖片保存在內存中,文件類型為png im.save(buf, png) # 將內存中的圖片數據返回給客戶端,MIME類型為圖片png return HttpResponse(buf.getvalue(), image/png)

二,前端寫法

<div class="row cl">
        <label class="form-label col-xs-3"></label>
        <div class="formControls col-xs-2">
              <input type="text" name="vc" placeholder="驗證碼" rows="1" class="input-text size-L" required id="id_vc">
        </div>
        <div class="formControls col-xs-5">
             <img id=‘verify_code‘ src="{% url ‘verify_code‘ %}?1" alt="CheckCode"/>
            <span id=‘verify_codeChange‘>
                <i class="icon Hui-iconfont">&#xe68f;</i>
            </span>
        </div>
    </div>
<script type="text/javascript">
    $(function(){
        $(‘#verify_codeChange‘).css(‘cursor‘,‘pointer‘).click(function() {
            $(‘#verify_code‘).attr(‘src‘,$(‘#verify_code‘).attr(‘src‘)+1)
        });
    });
</script>

三,後臺session驗證

        if vc.upper() != request.session[verify_code]:
            error.append(驗證碼錯誤!)
            return render(request, "accounts/login.html", error)

四,樣子

技術分享圖片

django項目驗證碼(PIL庫實現)