Vue - 使用 identify插件 生成图片验证码
发布日期:2021-10-02 12:55:35 浏览次数:0 分类:技术文章

Vue使用 identify 插件 生成图片验证码

一. identify.vue 组件

用于定义图片验证码的 参数 和 方法

<template>  <div class="s-canvas">    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>  </div></template><script>export default {
      name: "SIdentify",  props: {
        // 需要展示的验证码    identifyCode: {
          type: String,      default: "1234",    },    // 字体大小(最小值)    fontSizeMin: {
          type: Number,      default: 26,    },    // 字体大小(最大值)    fontSizeMax: {
          type: Number,      default: 40,    },    // 背景颜色色值最小值,最小为0    backgroundColorMin: {
          type: Number,      default: 180,    },    // 背景颜色色值最大值,最小为255    backgroundColorMax: {
          type: Number,      default: 240,    },    // 字体颜色色值最小值,最小值为0    colorMin: {
          type: Number,      default: 50,    },    // 字体颜色色值最大值,最小为255    colorMax: {
          type: Number,      default: 160,    },    // 干扰线颜色色值最小值,最小为0    lineColorMin: {
          type: Number,      default: 40,    },    // 干扰线颜色色值最大值,最小为255    lineColorMax: {
          type: Number,      default: 180,    },    // 干扰点颜色色值最小值,最小为0    dotColorMin: {
          type: Number,      default: 0,    },    // 干扰点颜色色值最大值,最小为255    dotColorMax: {
          type: Number,      default: 255,    },    // 画布宽度    contentWidth: {
          type: Number,      default: 111,    },    // 画布高度    contentHeight: {
          type: Number,      default: 38,    },  },  methods: {
        // 生成一个随机数    randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);    },    // 生成一个随机的颜色    randomColor(min, max) {
          let r = this.randomNum(min, max);      let g = this.randomNum(min, max);      let b = this.randomNum(min, max);      return "rgb(" + r + "," + g + "," + b + ")";    },    drawPic() {
          let canvas = document.getElementById("s-canvas");      let ctx = canvas.getContext("2d");      ctx.textBaseline = "bottom";      // 绘制背景      ctx.fillStyle = this.randomColor(        this.backgroundColorMin,        this.backgroundColorMax      );      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);      // 绘制文字      for (let i = 0; i < this.identifyCode.length; i++) {
            this.drawText(ctx, this.identifyCode[i], i);      }      this.drawLine(ctx);      this.drawDot(ctx);    },    drawText(ctx, txt, i) {
          ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);      ctx.font =        this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);      var deg = this.randomNum(-45, 45);      // 修改坐标原点和旋转角度      ctx.translate(x, y);      ctx.rotate((deg * Math.PI) / 180);      ctx.fillText(txt, 0, 0);      // 恢复坐标原点和旋转角度      ctx.rotate((-deg * Math.PI) / 180);      ctx.translate(-x, -y);    },    drawLine(ctx) {
          // 绘制干扰线      for (let i = 0; i < 0; i++) {
            ctx.strokeStyle = this.randomColor(          this.lineColorMin,          this.lineColorMax        );        ctx.beginPath();        ctx.moveTo(          this.randomNum(0, this.contentWidth),          this.randomNum(0, this.contentHeight)        );        ctx.lineTo(          this.randomNum(0, this.contentWidth),          this.randomNum(0, this.contentHeight)        );        ctx.stroke();      }    },    drawDot(ctx) {
          // 绘制干扰点      for (let i = 0; i < 50; i++) {
            ctx.fillStyle = this.randomColor(0, 255);        ctx.beginPath();        ctx.arc(          this.randomNum(0, this.contentWidth),          this.randomNum(0, this.contentHeight),          1,          0,          2 * Math.PI        );        ctx.fill();      }    },  },  watch: {
        identifyCode() {
          this.drawPic();    },  },  mounted() {
        this.drawPic();  },};</script><style scoped>.s-canvas {
      height: 38px;}canvas {
      margin-top: 5px;}</style>

identify参数说明如下:

参数 说明 类型 默认值
identifyCode 需要展示的验证码 String 1234
fontSizeMin 字体大小,最小值 Number 16
fontSizeMax 字体大小,最大值 Number 40
backgroundColorMin 背景颜色色值最小值,最小为0 Number 180
backgroundColorMax 背景颜色色值最大值,最大为255 Number 240
colorMin 字体颜色色值最小值,最小为0 Number 50
colorMax 字体颜色色值最大值,最大为255 Number 160
lineColorMin 干扰线颜色色值最小值,最小为0 Number 40
lineColorMax 干扰线颜色色值最大值,最大为255 Number 180
dotColorMin 干扰点颜色色值最小值,最小为0 Number 0
dotColorMax 干扰点颜色色值最大值,最大为255 Number 255
contentWidth 画布宽度 Number 160
contentHeight 画布高度 Number 40

二. 使用 identify.vue 组件生成验证码,并验证规则

<template>  <div class="wrap">    <el-form :model="loginForm" :rules="loginFormRules" ref="FormRef" label-position="top"    >      <el-form-item label="图片验证码" prop="pictureCode">        <el-input v-model="loginForm.pictureCode" autocomplete="off" class="pictureCode"        >          <template slot="append">            <div style="border: none" @click="refreshCode">              <!-- 3. 使用 identify 组件 -->              <picture-identify :identifyCode="loginForm.identifyCode"></picture-identify>            </div>          </template>        </el-input>      </el-form-item>    </el-form>  </div></template><script>// 1. 引入 identify (注意文件路径,请以实际路径为准)import PictureIdentify from '@/utils/identify.vue'export default {
      // 2. 注册 identify 组件  components:{
        PictureIdentify  },  data() {
        // 验证输入的图片验证码是否和存储的验证码相同    var checkPictureCode = (rules, value, callback) => {
          if (value == this.loginForm.identifyCode) {
            return callback();      } else {
            callback(new Error("验证码错误"));      }    };    return {
          loginForm: {
            pictureCode: "",//输入input框的验证码        identifyCode: "", //存储的图片验证码      },      // 验证规则      loginFormRules: {
            pictureCode: [          {
     required: true, message: "请输入图片验证码", trigger: "blur" },          {
     validator: checkPictureCode,trigger:'blur' }        ],      },    };  },  mounted() {
        this.refreshCode()  },  methods: {
        // 获取随机图片验证码    refreshCode() {
          var numCode = "";      for (var i = 0; i < 4; i++) {
            numCode += Math.floor(Math.random() * 10);      }      this.loginForm.identifyCode = numCode;    },  },};</script><style scoped>.el-form {
      width: 600px;  margin: 0 auto;}.identifyDiv{
      width:100%;  height: 100%;}.pictureCode >>> .el-input-group__append{
      padding: 0;}.pictureCode >>> .s-canvas canvas{
      margin-top: 0;}</style>

三. 效果图

在这里插入图片描述

上一篇:Vue - 使用音频播放器插件 vue-aplayer
下一篇:Vue - 实现通过手机发送短信验证码登录

关于作者

    白红宇是个全栈工程师,前端vue,小程序,app开发到后端框架设计,数据库设计,环境部署上线运维。

最新文章

scala 模式匹配支持正则吗_scala 正则匹配 2021-06-25
python上位机界面设计_用Python写个上位机学习系列之第一个界面的设计 2021-06-25
dicom多帧转换_如何提取/查看多帧DICOM文件的所有帧? 2021-06-25
layui弹窗自适应变大_layui弹窗宽度固定高度自适应界面 2021-06-25
秒懂百科python_码小会讲解【字符串】 ——Python学习秘籍 2021-06-25
python莫比乌斯环_如何用Matplotlib 画三维图的示例代码 2021-06-25
python绘制相频特性曲线_详解基于python的图像Gabor变换及特征提取 2021-06-25
手机如何用python抢鞋_使用python抢购魅族手机,坑爹的Python脚本,别入坑~ 2021-06-25
python中reversed函数怎么用_python入门课|Python reversed函数使用方法公布,能解决80%的python流程问题... 2021-06-25
python修改influxdb的数据_python+influxdb+shell编写区域网络状况表 2021-06-25
维特比算法 python_如何通俗地讲解 viterbi 算法? 2021-06-25
python multiprocessing.pool_python – multiprocessing.Pool:何时使用apply,a... 2021-06-25
springcloud 熔断_熔断降级之Spring Cloud 2021-06-25
随机森林模型_RDKit | 基于随机森林(RF)的机器学习模型预测hERG阻断剂活性 2021-06-25
shell 数组遍历_Java数组,这一篇文章就真够了 2021-06-25
链接规范必须在全局范围内_产品需求规范 2021-06-25
空间计量模型_跟着小范学空间计量之十四:地理加权回归和空间计量全局模型的融合建模... 2021-06-25
几何分布的期望_概率小题——分布列专题 2021-06-25
ubuntu 安装node_ROS系统安装与体验 2021-06-25
salesforce怎么让按钮只能使用一次_一次性无尘室粘尘垫是怎么使用的? 2021-06-25