python 图片验证码

 

1.图片验证码第一步

# 导入绘图库
from PIL import ImageDraw, Image, ImageFont

2.生成图片验证类

 

# 图片验证类
class ImgCode(BaseHandler):

    # 定义随机颜色实例方法
    def get_random_color(self):

        R = random.randrange(255)
        G = random.randrange(255)
        B = random.randrange(255)

        return (R, G, B)

    # 生成文件流验证码
    async def get(self):
        email = self.get_argument('email', None)
        if not email:
            self.finish({"msg": '缺少唯一标识', "errcode": 0})
        # 定义画布
        img_size = (120, 50)
        # 定义画笔
        image = Image.new("RGB", img_size, self.get_random_color())
        draw = ImageDraw.Draw(image, 'RGB')

        # 绘制来源字符串
        source = "0123456789"
        # 定义容器
        code_str = ""
        # 循环绘制
        for i in range(4):
            # 获取一种颜色
            text_color = self.get_random_color()
            # 获取随机字符串
            tmp_num = random.randrange(len(source))
            random_str = source[tmp_num]
            # 收集容器中
            code_str += random_str

            # 导入系统字体
            myfont = ImageFont.truetype("C:\\windows\\fonts\\arial.ttf", 20)
            # 绘制
            draw.text((10 + 30 * i, 20), random_str, text_color)

        # 存储图片对象
        self.application.redis.set(email, code_str)

        # 获取内存缓冲区
        buf = io.BytesIO()
        # 保存图片对象
        image.save(buf, "png")
        # 设置头部声明
        self.set_header("Content-Type", "image/png")
        # 返回
        return self.write(buf.getvalue())

3.封装验证码

# 视图验证码验证
def check_imgcode(func):
    async def wrapper(self, *args, **kwargs):
        email = self.get_argument('email', None)
        image_code = self.get_argument('image_code', None)
        redis_code = self.application.redis.get(email)

        if redis_code != image_code:
            return self.finish({'msg': '验证码有误', 'errcode': 3})

        # 执行被装饰方法
        await func(self, *args, **kwargs)

    return wrapper

4.调用封装方法

@check_imgcode
    async def post(self):
        pass

5.前端获取

<van-field  v-if='isshow' v-model="img_code" placeholder="请输入验证码">
                        <template #button>
                        <van-image :src="img"  @click="getimg" class='imagecode' v-if='isshow' /> 
                        </template>
                    </van-field>
                                      
                    <br/><br/>
                    <van-button  @click="create_img">生成图片验证码</van-button> 

export default {
 data() {
    return {
     // 设置表单数据   
      
      img:this.baseurl+'imgcode/',
      img_code:'',
      isshow:0,
    }
  },
}

 

getimg:function(){
            // 生成随机数
            var num =Math.ceil(Math.random()*10)
            // 添加随机数
            this.img = this.baseurl+'imgcode/'+"?email="+this.email+'&v='+num
        },
        create_img:function(){
            if(this.email==''){
                this.$toast.fail('邮箱不能为空')
                return
            }
            if(this.isshow==0){
                // 增加邮箱参数
                this.img = this.img +'?email='+this.email
                // 展示表单和图片验证码
                this.isshow=1
            }else{
                this.getimg()
            }
            
        }