图片验证码生成

安装pillow

pip install pillow

在utils下新建python package命名为captcha

把需要需要用到的字体放在captcha下

编辑captcha.__init__.py, 生成验证码

import random
import string
# Image:一个画布
# ImageDraw:一个画笔
# ImageFont:画笔的字体 # pip install pillow
from PIL import Image, ImageDraw, ImageFont class Captcha(object):
# 生成几位数的验证码
number = 4
# 验证码图片的高度和宽度
size = (100, 30)
# 验证码字体大小
fontsize = 25
#加入干扰线条数
line_number = 2 #构建一个验证码源文本
SOURCE = list(string.ascii_letters)
for index in range(0, 10):
SOURCE.append(str(index)) #用来绘制干扰线
@classmethod
def __gene_line(cls, draw, width, height):
begin = (random.randint(0, width), random.randint(0, height))
end = (random.randint(0, width), random.randint(0, height))
draw.line([begin, end], fill=cls.__gene_random_color(), width=2) # 用来绘制干扰点
@classmethod
def __gene_points(cls, draw, point_chance, width, height):
chance = min(100, max(0, int(point_chance))) #大小限制在[0, 100]
for w in range(width):
for h in range(height):
tmp = random.randint(0, 100)
if tmp > 100 - chance:
draw.point((w, h), fill=cls.__gene_random_color()) # 生成随机的颜色
@classmethod
def __gene_random_color(cls, start=0, end=255):
random.seed()
return (random.randint(start, end),random.randint(start, end), random.randint(start, end)) # 随机选择一个字体
@classmethod
def __gene_random_font(cls):
fonts = [
'Courgette-Regular.ttf',
'LHANDW.TTF',
'Lobster-Regular.ttf',
'verdana.ttf'
]
font = random.choice(fonts)
return 'utils/captcha/' + font # 用来随机生成一个字符串
@classmethod
def gene_text(cls, number):
#num是生成验证码的位数
return ''.join(random.sample(cls.SOURCE, number)) # 生成验证码
@classmethod
def gene_graph_captcha(cls):
#验证码图片的高和宽
width, height = cls.size
#创建图片
image = Image.new('RGBA', (width,height),cls.__gene_random_color(0, 100))
#验证码的字体
font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)
#创建画笔
draw = ImageDraw.Draw(image)
#生成字符串
text = cls.gene_text(cls.number)
#获取字体尺寸
font_width, font_height = font.getsize(text)
#填充字符串
draw.text(((width - font_width) / 2, (height - font_height) / 2), text, font=font,
fill=cls.__gene_random_color(150, 255))
#绘制干扰线
for x in range(0, cls.line_number):
cls.__gene_line(draw, width, height)
#绘制噪点
cls.__gene_points(draw, 10, width, height)
return (text, image)

captcha.__init__.py

测试的时候我发现有些字体会导致程序崩溃,所以,我只设置了一个字体  fonts = ['verdana.ttf']

编辑视图。我们把它放到 公共的common里面去,编辑common.views.py

from flask import Blueprint, make_response
from utils.captcha import Captcha
from io import BytesIO bp = Blueprint('common', __name__, url_prefix='/c') #common太长,改为c @bp.route('/')
def index():
return 'common index' @bp.route('/graph_captcha/')
def graph_captcha():
text, image = Captcha.gene_graph_captcha()
out = BytesIO()
image.save(out, 'png')
out.seek(0)
resp = make_response(out.read())
resp.content_type = 'image/png'
return resp

访问http://127.0.0.1:5000/c/graph_captcha/

图片验证放到注册页面。点击一次更换一张

图片验证码放在注册页面比较简单,只需要把编辑front_signup.html,把里面的“图片验证码”字换成img标签,src设置成图片验证码的url

<div class="input-group">
<input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码">
<span class="input-group-addon captcha-addon"> <!--加了一个类captcha-addon-->
<img id="captcha-img" src="{{ url_for('common.graph_captcha') }}"><!--加了id aptcha-img-->
</span>
</div> <!--样式-->
.captcha-addon{
padding: 0; //这是内边距为0,因为input-group-addon有设置内边距
overflow: hidden; //当里面的元素超出则隐藏
} #captcha-img{
height: 32px; //设置图片的高度为32px
cursor: pointer; //当鼠标移到图片上变成手的图标
}

还有个需求就是,我们点击一个图片验证码,则需要更换成另外一个。

图片验证码更换,只需要替换它的url就可以,但是它的url就是一个http://127.0.0.1:5000/common/captcha/

所以只需要请求的时候加个参数http://127.0.0.1:5000/front/captcha/?xxx=<随机数>即可

我还需要对?xxx=<随机数>做处理,不然当用户点击多次,?xxx=<随机数>&xxx=<随机数>...变得很长,而我们只需要一个就可以了,这里封装了一个js, 存放在static/common/js/bbsparams.js中

/**
* Created by Administrator on 2017/3/24.
*/ var bbsparam = {
setParam: function (href,key,value) {
// 重新加载整个页面
var isReplaced = false;
var urlArray = href.split('?');
if(urlArray.length > 1){
var queryArray = urlArray[1].split('&');
for(var i=0; i < queryArray.length; i++){
var paramsArray = queryArray[i].split('=');
if(paramsArray[0] == key){
paramsArray[1] = value;
queryArray[i] = paramsArray.join('=');
isReplaced = true;
break;
}
} if(!isReplaced){
var params = {};
params[key] = value;
if(urlArray.length > 1){
href = href + '&' + $.param(params);
}else{
href = href + '?' + $.param(params);
}
}else{
var params = queryArray.join('&');
urlArray[1] = params;
href = urlArray.join('?');
}
}else{
var param = {};
param[key] = value;
if(urlArray.length > 1){
href = href + '&' + $.param(param);
}else{
href = href + '?' + $.param(param);
}
}
return href;
}
};

bbsparams

然后在static/front/js/下新建front_signup.js,当点击图片时更换src

$(function(){
$('#captcha-img').click(function (event) {
var self = $(this);
var src = self.attr('src');
var newsrc = bbsparam.setParam(src,'xx',Math.random());
self.attr('src',newsrc);
});
});

在signup.html中引入上面两个js

<script src="{{ url_for('static', filename='common/js/bbsparam.js') }}"></script>
<script src="{{ url_for('static', filename='front/js/front_signup.js') }}"></script>

Flask实战第40天:图片验证码生成技术的更多相关文章

  1. JavaWeb开发之普通图片验证码生成技术与算术表达式验证码生成技术

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6134649.html    另:算术验证码生成的JSP.Servlet实现均已移植github:https:/ ...

  2. Atitit 图片 验证码生成attilax总结

    Atitit 图片 验证码生成attilax总结 1.1. 图片验证码总结1 1.2. 镂空文字  打散 干扰线 文字扭曲 粘连2 1.1. 图片验证码总结 因此,CAPTCHA在图片验证码这一应用点 ...

  3. 开发工具类API调用的代码示例合集:六位图片验证码生成、四位图片验证码生成、简单验证码识别等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...

  4. [转]php 图片验证码生成 前后台验证

    本文转自:https://www.cnblogs.com/xiaoyezi/p/3541195.html 自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一 ...

  5. php 图片验证码生成 前后台验证

    自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一下,希望大家在用到相关问题的时候可以有一定的参考性. 首先,php验证码生成. 代码如下: 1.生成图像代 ...

  6. 一篇Java图片验证码生成的代码

    package projectUtil; /** * @author tian * @date 2019/4/1015:58 */ import javax.imageio.ImageIO; impo ...

  7. Java图片验证码生成工具

    直接把以下代码拷贝使用: import javax.imageio.ImageIO;import java.awt.*;import java.awt.image.BufferedImage;impo ...

  8. .net图片验证码生成、点击刷新及验证输入是否正确

    ①创建ValidateCode.aspx,在ValidateCode.aspx.cs中加入如下代码.生成验证码图片,在页面上输出,输出jpeg格式. protected void Page_Load( ...

  9. node 图片验证码生成

    var captchapng = require('captchapng'); var http = require("http") var server = http.creat ...

随机推荐

  1. windows10安装oracle11g报错ORA-01034、ORA-01078

    ORA-01034表示数据库实例未建立,可以先用管理员账号进入一个空白实例 sqlplus / as sysdba; 如果您当前使用的账号是安装oracle的账号,则不需要账号密码就可以登陆oracl ...

  2. idea ssm框架搭建

    1.分享一篇完整的ssm框架搭建连接 大牛博客:https://www.cnblogs.com/toutou/p/ssm_spring.html#_nav_0 2.我的搭建的完整项目连接,可以进入我的 ...

  3. MSSQL 构建临时表SQL

    declare @StartQuarter int declare @StartYear int declare @EndQuarter int declare @EndYear int declar ...

  4. IE浏览器Bug总结

    每每在网上搜索IE浏览器Bug时,总是骂声一片,特别是前端工程师,每天都要面对,IE浏览器特别是IE6,存在很多Bug,对Web标准的支持也拖后腿,但不可否认,IE浏览器是曾经的霸主,它的贡献也是巨大 ...

  5. HashMap根据value获取key值

    public static String getCityId(HashMap<String,String> citys, String city){ Set set = citys.ent ...

  6. LCD实验学习笔记(八):中断

    s3c2440有60个中断源(其中15个为子中断源). 31个32位的通用寄存器,6个程序状态寄存器.有6种工作模式(系统/用户模式,快中断模式,管理模式,数据访问中止模式,中断模式,未定指令中止模式 ...

  7. PHP序列化、反序列化常用的魔术方法

    __wakeup() //使用unserialize时触发__sleep() //使用serialize时触发__destruct() //对象被销毁时触发__call() //在对象上下文中调用不可 ...

  8. python自动开发之第二十二天

    知识点概要 - Session - CSRF - Model操作 - Form验证(ModelForm) - 中间件 - 缓存 - 信号 一. Session 基于Cookie做用户验证时:敏感信息不 ...

  9. nvidia tk1使用记录--基本环境搭建

    前言 项目最开始是在X86+Nvidia(ubuntu+opencv+cuda)平台上实现,达到了期望性能,最近考虑将其移植到嵌入式平台,特别是最近nvidia出了tegra X1,基于和我们使用的g ...

  10. 内核抢占实现(preempt) 【转】

    转自:http://blog.chinaunix.net/uid-12461657-id-3353217.html 一.什么叫抢占所谓抢占,说白了就是进程切换.linux的用户空间,进程A在执行中,来 ...