最近项目中要用到图片验证码，网上一查有很多，基本都是千篇一律的4位纯数字验证码。首先得感谢那位一代目兄台提供的模板，由于不能满足需求，所以对其进行了改造升级。

经改造的图片验证码能满足一下情形使用：①、验证码位数；②、纯数字和纯字母的验证码；③、数字和字母混合的验证码；④、字母的大小写；⑤、数字和字母（大小写）混合下各自的位数；⑥、随机生成混合情况下各自的位数；⑦、验证码随机排序。大致就这些组合吧，基本的需求都能满足，话不多说，看~

1、先把一代目兄台的canvas参数搬一下

参数 说明 类型 默认值
identifyCode 展示的图片验证码 string 1234
fontSizeMin 字体大小，最小值 number 16
fontSizeMax 字体大小，最大值 number 40
backgroundColorMin 背景颜色色值最小值，最小为 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

2、主角儿identify.vue组件登场

  1. <template>
  2.   <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  3. </template>
  4. <script>
  5. export default {
  6.   name: 'SIdentify',
  7.   props: {
  8.     // 图片验证码
  9.     identifyCode: {
  10.       type: String,
  11.       default: '1234'
  12.     },
  13.     // 字体最小值
  14.     fontSizeMin: {
  15.       type: Number,
  16.       default: 28
  17.     },
  18.     // 字体最大值
  19.     fontSizeMax: {
  20.       type: Number,
  21.       default: 34
  22.     },
  23.     // 背景颜色色值最小值，最小为0
  24.     backgroundColorMin: {
  25.       type: Number,
  26.       default: 200
  27.     },
  28.     // 背景颜色色值最大值，最大为255
  29.     backgroundColorMax: {
  30.       type: Number,
  31.       default: 240
  32.     },
  33.     // 字体颜色色值最小值，最小为0
  34.     colorMin: {
  35.       type: Number,
  36.       default: 0
  37.     },
  38.     // 字体颜色色值最大值，最大为255
  39.     colorMax: {
  40.       type: Number,
  41.       default: 180
  42.     },
  43.     // 干扰线颜色色值最小值，最小为0
  44.     lineColorMin: {
  45.       type: Number,
  46.       default: 150
  47.     },
  48.     // 干扰线颜色色值最大值，最大为255
  49.     lineColorMax: {
  50.       type: Number,
  51.       default: 200
  52.     },
  53.     // 干扰点颜色色值最小值，最小为0
  54.     dotColorMin: {
  55.       type: Number,
  56.       default: 100
  57.     },
  58.     // 干扰点颜色色值最大值，最大为255
  59.     dotColorMax: {
  60.       type: Number,
  61.       default: 250
  62.     },
  63.     // 画布宽度
  64.     contentWidth: {
  65.       type: Number,
  66.       default: 100
  67.     },
  68.     // 画布高度
  69.     contentHeight: {
  70.       type: Number,
  71.       default: 40
  72.     }
  73.   },
  74.   mounted () {
  75.     this.drawPic()
  76.   },
  77.   methods: {
  78.     /**
  79.      * 生成一个随机数
  80.      * @param {number} min 随机数最小值
  81.      * @param {number} max 随机数最大值
  82.      */
  83.     randomNum (min, max) {
  84.       return Math.floor(Math.random() * (max - min) + min)
  85.     },
  87.     /**
  88.      * 生成一个随机的颜色
  89.      * @param {number} min 随机数最小值
  90.      * @param {number} max 随机数最大值
  91.      */
  92.     randomColor (min, max) {
  93.       const r = this.randomNum(min, max)
  94.       const g = this.randomNum(min, max)
  95.       const b = this.randomNum(min, max)
  96.       return 'rgb(' + r + ',' + g + ',' + b + ')'
  97.     },
  99.     /**
  100.      * 绘制图片验证码
  101.      */
  102.     drawPic () {
  103.       let canvas = document.querySelector('#s-canvas')
  104.       let ctx = canvas.getContext('2d')
  105.       ctx.textBaseline = 'bottom'
  106.       // 绘制背景
  107.       ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
  108.       ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
  109.       // 绘制干扰点
  110.       this.drawDot(ctx)
  111.       // 绘制验证码
  112.       for (let i = 0; i < this.identifyCode.length; i++) {
  113.         this.drawText(ctx, this.identifyCode[i], i)
  114.       }
  115.       // 绘制干扰线
  116.       this.drawLine(ctx)
  117.     },
  119.     /**
  120.      * 绘制文本单个验证码
  121.      * @param {object} ctx canvas上下文对象
  122.      * @param {string} txt 单个验证码
  123.      * @param {number} i 单个验证码序号
  124.      */
  125.     drawText (ctx, txt, i) {
  126.       ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
  127.       ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
  128.       let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
  129.       let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
  130.       let deg = this.randomNum(-45, 45)
  131.       // 修改坐标原点和旋转角度
  132.       ctx.translate(x, y)
  133.       ctx.rotate(deg * Math.PI / 180)
  134.       ctx.fillText(txt, 0, 0)
  135.       // 恢复坐标原点和旋转角度
  136.       ctx.rotate(-deg * Math.PI / 180)
  137.       ctx.translate(-x, -y)
  138.     },
  140.     /**
  141.      * 绘制干扰线
  142.      * @param {object} ctx canvas上下文对象
  143.      */
  144.     drawLine (ctx) {
  145.       for (let i = 0; i < 8; i++) {
  146.         ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
  147.         ctx.beginPath()
  148.         ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
  149.         ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
  150.         ctx.stroke()
  151.       }
  152.     },
  154.     /**
  155.      * 绘制干扰点
  156.      * @param {object} ctx canvas上下文对象
  157.      */
  158.     drawDot (ctx) {
  159.       for (let i = 0; i < 60; i++) {
  160.         ctx.fillStyle = this.randomColor(0, 255)
  161.         ctx.beginPath()
  162.         ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
  163.         ctx.fill()
  164.       }
  165.     }
  166.   },
  167.   watch: {
  168.     identifyCode () {
  169.       this.drawPic()
  170.     }
  171.   }
  172. }
  173. </script>

3、对图片验证码组件的引用

为了方便演示，直接在App.vue页面中引用

  1. <template>
  2.   <div id="app" @click="refreshCode">
  3.     <s-identify :identifyCode="identifyCode"></s-identify>
  4.   </div>
  5. </template>
  7. <script>
  8. import SIdentify from './components/identify'
  9. export default {
  10.   name: 'App',
  11.   data () {
  12.     return {
  13.       makeCode: '',
  14.       identifyCode: ''
  15.     }
  16.   },
  17.   mounted () {
  18.     this.makeIdentifyCode({ randomTypeLen: true })
  19.   },
  20.   methods: {
  21.     /**
  22.      * 随机生成一个0~9之间的数
  23.      */
  24.     randomNum () {
  25.       return Math.floor(Math.random() * 10)
  26.     },
  28.     /**
  29.      * 随机生成一个字母
  30.      * @param {boolean} isUupper 生成大写字母
  31.      */
  32.     randomAlphabet ({ isUupper = false } = {}) {
  33.       // a的Unicode值为97,z的Unicode值为123
  34.       const alphabet = String.fromCharCode(Math.floor(Math.random() * 25) + 97)
  35.       if (!isUupper) {
  36.         return alphabet
  37.       } else {
  38.         return alphabet.toUpperCase()
  39.       }
  40.     },
  42.     /**
  43.      * 生成图片验证码
  44.      * @param {number} length 图片验证码位数
  45.      * @param {boolean} typeMix 数字和字母混合
  46.      * @param {string} pureNumber 纯数字('number')或者字母('alphabet')
  47.      * @param {boolean} randomTypeLen 随机生成类型个数组合
  48.      * @param {boolean} capsLookMix 字母大小写混合
  49.      * @param {number} numLength 混合类型下的数字个数
  50.      * @param {number} uupperLength 大写字母的个数
  51.      */
  52.     makeIdentifyCode ({ length = 4, typeMix = true, pureNumber = 'alphabet', randomTypeLen = false, capsLookMix = false, numLength = 2, uupperLength = 1 } = {}) {
  53.       this.makeCode = ''
  54.       // 数字和字母混合
  55.       if (typeMix) {
  56.         // 随机生成类型个数组合
  57.         if (randomTypeLen) {
  58.           // 字母大小写混合
  59.           if (capsLookMix) {
  60.             const numLength = Math.floor(Math.random() * length) + 1
  61.             const uupperLength = numLength === length ? 0 : Math.floor(Math.random() * (length - numLength)) + 1
  62.             for (let i = 0; i < numLength; i++) {
  63.               this.makeCode += this.randomNum()
  64.             }
  65.             for (let i = 0; i < uupperLength; i++) {
  66.               this.makeCode += this.randomAlphabet({ isUupper: true })
  67.             }
  68.             if (numLength + uupperLength < length) {
  69.               for (let i = 0; i < length - numLength - uupperLength; i++) {
  70.                 this.makeCode += this.randomAlphabet()
  71.               }
  72.             }
  73.           } else {
  74.             const numLength = Math.floor(Math.random() * length) + 1
  75.             for (let i = 0; i < numLength; i++) {
  76.               this.makeCode += this.randomNum()
  77.             }
  78.             if (numLength < length) {
  79.               for (let i = 0; i < length - numLength; i++) {
  80.                 this.makeCode += this.randomAlphabet()
  81.               }
  82.             }
  83.           }
  84.         } else {
  85.           // 字母大小写混合
  86.           if (capsLookMix) {
  87.             const tempNumLength = numLength < 0 ? 2 : numLength > length ? 2 : numLength
  88.             const tempUupperLength = uupperLength < 0 ? 1 : uupperLength > length - tempNumLength ? 1 : uupperLength
  89.             for (let i = 0; i < tempNumLength; i++) {
  90.               this.makeCode += this.randomNum()
  91.             }
  92.             for (let i = 0; i < tempUupperLength; i++) {
  93.               this.makeCode += this.randomAlphabet({ isUupper: true })
  94.             }
  95.             if (tempNumLength + tempUupperLength < length) {
  96.               for (let i = 0; i < length - tempNumLength - tempUupperLength; i++) {
  97.                 this.makeCode += this.randomAlphabet()
  98.               }
  99.             }
  100.           } else {
  101.             const tempNumLength = numLength < 0 ? 2 : numLength > length ? 2 : numLength
  102.             for (let i = 0; i < tempNumLength; i++) {
  103.               this.makeCode += this.randomNum()
  104.             }
  105.             if (tempNumLength < length) {
  106.               for (let i = 0; i < length - tempNumLength; i++) {
  107.                 this.makeCode += this.randomAlphabet()
  108.               }
  109.             }
  110.           }
  111.         }
  112.       } else {
  113.         // 纯数字('number')
  114.         if (pureNumber === 'number') {
  115.           for (let i = 0; i < length; i++) {
  116.             this.makeCode += this.randomNum()
  117.           }
  118.         }
  119.         // 纯字母('alphabet')
  120.         if (pureNumber === 'alphabet') {
  121.           // 字母大小写混合
  122.           if (capsLookMix) {
  123.             const tempUupperLength = uupperLength < 0 ? 1 : uupperLength > length ? 1 : uupperLength
  124.             for (let i = 0; i < tempUupperLength; i++) {
  125.               this.makeCode += this.randomAlphabet({ isUupper: true })
  126.             }
  127.             if (tempUupperLength < length) {
  128.               for (let i = 0; i < length - tempUupperLength; i++) {
  129.                 this.makeCode += this.randomAlphabet()
  130.               }
  131.             }
  132.           } else {
  133.             for (let i = 0; i < length; i++) {
  134.               this.makeCode += this.randomAlphabet()
  135.             }
  136.           }
  137.         }
  138.       }
  139.       this.shuffle(this.makeCode)
  140.     },
  142.     /**
  143.      * 图片验证码随机排序
  144.      * @param {string} str 图片验证码
  145.      */
  146.     shuffle (str) {
  147.       this.identifyCode = [...str].sort(() => Math.random() - 0.5).join('')
  148.       console.log(this.identifyCode)
  149.     },
  151.     /**
  152.      * 更换图片验证码
  153.      */
  154.     refreshCode () {
  155.       this.makeIdentifyCode({ randomTypeLen: true })
  156.     }
  157.   },
  158.   components: {
  159.     's-identify': SIdentify
  160.   }
  161. }
  162. </script>

就这样吧，完事儿~

Vue图片验证码-自定义组件高级版的更多相关文章

  1. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  2. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  3. VUE 图片验证码

    1. 概述 1.1 说明 在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 <templat ...

  4. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  5. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  6. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  7. vue之全局自定义组件

    在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...

  8. Vue 获取验证码倒计时组件

    子组件 <template> <a class="getvalidate":class="{gray: (!stop)}"@click='cl ...

  9. Vue第一个自定义组件：数字输入框(number-input)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 70. Climbing Stairs QuestionEditorial Solution

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  2. xgboost load model from demp text file

    python package : https://github.com/mwburke/xgboost-python-deploy import xgboost as xgb import numpy ...

  3. python之sorted用法

    operator.itemgetter函数 operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),下面看例子. a = [1, ...

  4. GO语言slice详解（结合源码）

    一.GO语言中slice的定义 slice 是一种结构体类型,在源码中的定义为: src/runtime/slice.go type slice struct { array unsafe.Point ...

  5. 推荐算法之因子分解机(FM)

    在这篇文章我们将介绍因式分解机模型(FM),为行文方便后文均以FM表示.FM模型结合了支持向量机与因子分解模型的优点,并且能够用了回归.二分类以及排序任务,速度快,是推荐算法中召回与排序的利器.FM算 ...

  6. 使用 pyenv 管理不同的 Python 版本

    1. pyenv 的安装 $ yum install git -y $ yum install gcc make patch gdbm-devel openssl-devel sqlite-devel ...

  7. Windwos日志分析

    Windows日志分析工具 查看系统日志方法: 在“开始”菜单上,依次指向“所有程序”.“管理工具”,然后单击“事件查看器” 按 "Window+R",输入 ”eventvwr.m ...

  8. WinBox软路由的自定义IP设定

             软路由ros(MIKRTIK)安装简单步骤 由于本主也是刚刚接触软路由这个硬件方面的知识.所以也是略知皮毛而已,今天通过网上的学习,然后自己总结了一下怎么在软路由中设定一个自定义IP ...

  9. c++ bool

    bool 就两个值,真或者假,通常用来存储关系表达式或者逻辑表达式的结果. 以前是用 int 来表示真假,大 int 有多个值,所以才规定 0 为假,非零为真,导致对应关系比较麻烦,有了 bool 就 ...

  10. 解决掉你心中 js function与Function的关系的疑问

    前言 在网上有很多关于js function 与 Function直接关系的文章. 但是我感觉过于抽象化了,那么如何是具体化的解释? 正文部分为个人理解部分,如有不对望指出. 正文 <scrip ...