一:后端代码
a. 安装pillow模块
pip3 install pillow -i https://pypi.douban.com/simple/
b. 把下列字体文件下载下来,放到根目录(一定要根目录,因为我函数封装的路径,从根目录找的)
字体文件https://pan.baidu.com/s/1FRSdn23s_ADD3mLMjaxdVg 提取码:1211
ps:也可以自己找一个字体文件,在image_code进行配置
a. 字体文件,ttf格式就行,
c. 路由urls.py
# 1. 创建一个路由
# 验证码图片
url(r'^image/code/$', account.image_code, name='image_code'),
d. 视图views.py
# 2. 创建一个view视图
# 验证码
from utils.image_code import check_code
from io import BytesIO
def image_code(request):
""" 生成图片验证码 """
image_object, code = check_code()
request.session['image_code'] = code
request.session.set_expiry(60) # 主动修改session的过期时间为60s
stream = BytesIO()
image_object.save(stream, 'png')
return HttpResponse(stream.getvalue())
e. 创建一个utils文件夹,创建一个py文件 image_code.py
#!/usr/bin/env python
# -*- coding:utf-8 -*-
from PIL import Image, ImageDraw, ImageFont, ImageFilter
import random
# Monaco.ttf 字体文件 放在根目录下,没有会报错
def check_code(width=120, height=30, char_length=5, font_file='Monaco.ttf', font_size=28):
code = []
img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
def rndChar():
"""
生成随机字母
:return:
"""
return chr(random.randint(65, 90))
def rndColor():
"""
生成随机颜色
:return:
"""
return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))
# 写文字
font = ImageFont.truetype(font_file, font_size)
for i in range(char_length):
char = rndChar()
code.append(char)
h = random.randint(0, 4)
draw.text([i * width / char_length, h], char, font=font, fill=rndColor())
# 写干扰点
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
# 写干扰圆圈
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
# 画干扰线
for i in range(5):
x1 = random.randint(0, width)
y1 = random.randint(0, height)
x2 = random.randint(0, width)
y2 = random.randint(0, height)
draw.line((x1, y1, x2, y2), fill=rndColor())
img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
return img, ''.join(code)
if __name__ == '__main__':
image_object, code = check_code()
# 把图片写入文件
"""
with open('code.png', 'wb') as f:
image_object.save(f, format='png')
"""
# 把图片的内容写到内存 stream
"""
from io import BytesIO
stream = BytesIO()
image_object.save(stream, 'png')
stream.getvalue()
"""
f. 前端生成使用
<div class="col-xs-5">
<img src="{% url 'image_code' %}" alt="" id="clickImg">
</div>
g. 前端搭配点击刷新(需要导入JQ,我这边没有导入)
<script>
// 点击验证码刷新
$(function () {
clickImgBtn();
})
function clickImgBtn() {
$('#clickImg').click(function () {
var oldSrc = $(this).attr('src')
$(this).attr('src', oldSrc + '?')
})
}
</script>