import random
# Image:用来生成图片 ImageDraw:用来在图片上"写字" ImageFont:字体样式
from PIL import Image, ImageDraw, ImageFont
# BytesIO能保存数据,并且在取数据时会以二进形式返回, StingIO在取数据时会以字符串形式返回
from io import BytesIO, StringIO
# 获取随机三个rgb参数
def get_color():
return random.randint(64, 255), random.randint(64, 255), random.randint(64, 255)
def get_color1():
return random.randint(0, 196), random.randint(0, 196), random.randint(0, 196)
def get_code(request):
# 生成图片对象,参数一传“RGB”,参数二传图片尺寸(元组), 参数三传颜色
img_obj = Image.new("RGB", (262, 33), get_color())
# 生成一个画笔对象,该画笔可以在图片上随意图画
img_draw = ImageDraw.Draw(img_obj)
# 生成一个字体对象
img_font = ImageFont.truetype("static/font/fang.ttf", 30)
# 为图片的每个像素设置随机颜色
for x in range(262):
for y in range(33):
img_draw.point((x, y), fill=get_color1())
code = ""
# 循环四次,生成一个4个字符的随机字符串
for i in range(4):
random_int = str(random.randint(0, 9))
random_lower = chr(random.randint(97, 122))
random_upper = chr(random.randint(65, 90))
# 获取一个随机的字母或数字
temp_code = random.choice([random_int, random_lower, random_upper])
# 将获取的随机字符写到图片上(x,y坐标, 字符, 颜色, 字体)
img_draw.text((60 + i * 40, 0), temp_code, get_color(), img_font)
code += temp_code
print(code)
# 将最终生成的字符保存到session中,方便用户登录时验证码验证
request.session["code"] = code
# 生成一个BytesIO对象,该对象可看成文件句柄
io_obj = BytesIO()
# 将图片数据存入内存管理器中,需指定图片格式,否则报错
img_obj.save(io_obj, "png")
# 将二进制格式的图片数据发送给前端渲染
return HttpResponse(io_obj.getvalue())
<div class="form-group">
<label for="id_code">验证码</label>
<div class="row">
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control" id="id_code">
</div>
<div class="col-md-6 col-sm-6">
<img src="/get_code/" alt="" width=100% height=33px id="id_img">
</div>
</div>
</div>
// 用户点击验证码图片就能更换图片,只需在img标签的src属性后面加字符就可以
$("#id_img").on("click", function () {
let old_url = $(this).attr("src");
$(this).attr("src", old_url+"?")
});