vue 验证,图形验证码怎么实现

  vue 验证,图形验证码怎么实现

  这篇文章主要为大家详细介绍了某视频剪辑软件实现图形验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  本文实例为大家分享了某视频剪辑软件实现图形验证码的具体代码,供大家参考,具体内容如下

  

效果图:

  或

  或

  或

  

代码:

  验证码组件:

  src/common/side标识符。某视频剪辑软件

  模板

  画布

  画布id= s-canvas :width=内容宽度:height=内容高度/canvas

  /div

  /模板

  脚本

  导出默认值{

  名称:侧面识别,

  道具:{

  识别码:{

  类型:字符串,

  默认值:"1234"

  },

  fontSizeMin: {

  类型:数量,

  默认值:18

  },

  fontSizeMax: {

  类型:数量,

  默认值:40

  },

  backgroundColorMin: {

  类型:数量,

  默认值:180

  },

  backgroundColorMax: {

  类型:数量,

  默认值:240

  },

  colorMin: {

  类型:数量,

  默认值:50

  },

  colorMax: {

  类型:数量,

  默认值:160

  },

  lineColorMin: {

  类型:数量,

  默认值:40

  },

  lineColorMax: {

  类型:数量,

  默认值:180

  },

  dotColorMin: {

  类型:数量,

  默认值:0

  },

  dotColorMax: {

  类型:数量,

  默认值:255

  },

  内容宽度:{

  类型:数量,

  默认值:111

  },

  内容高度:{

  类型:数量,

  默认值:38

  }

  },

  方法:{

  //生成一个随机数

  随机编号(最小值,最大值){

  回归数学。地板(数学。random()*(max-min)min)

  },

  //生成一个随机的颜色

  随机颜色(最小值,最大值){

  设r=this.randomNum(最小值,最大值)

  设g=this.randomNum(最小值,最大值)

  设b=this.randomNum(最小值,最大值)

  返回" rgb( r , g , b )"

  },

  drawPic() {

  让画布=文档。getelementbyid( s-canvas )

  let ctx=canvas.getContext(2d )

  ctx.textBaseline=bottom

  //绘制背景

  CTX。填充样式=this。随机颜色(这个。背景色最小值,this.backgroundColorMax)

  ctx.fillRect(0,0,this.contentWidth,this.contentHeight)

  //绘制文字

  对于(设I=0;我这个。识别代码。长度;i ) {

  this.drawText(ctx,this.identifyCode[i],I)

  }

  //this.drawLine(ctx) //绘制干扰线

  //this.drawDot(ctx) //绘制干扰点

  },

  //绘制文本

  drawText(ctx,txt,i) {

  CTX。填充样式=this。随机颜色(这个。color min,this.colorMax)

  CTX。font=this。random num(这个。最小字体大小,this.fontSizeMax) px SimHei

  设x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度^ 1))

  设y=这个。random num(这个。最大字体大小,this.contentHeight - 5)

  var deg=this.randomNum(-30,30) //字符旋转角度(不超过45度比较好)

  //修改坐标原点和旋转角度

  ctx.translate(x,y)

  ctx.rotate(度数*数学/180).

  ctx.fillText(txt,0,0)

  //恢复坐标原点和旋转角度

  CTX . rotate(-deg * Math ./180).

  ctx.translate(-x,-y)

  },

  绘制线(ctx) {

  //绘制干扰线

  对于(设I=0;I 8;i ) {

  CTX。笔画风格=这个。随机颜色(这个。线条颜色最小值,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()

  }

  },

  绘图点(ctx) {

  //绘制干扰点

  对于(设I=0;i 100i ) {

  CTX。填充样式=this。随机颜色(0.255)

  ctx.beginPath()

  ctx.arc(this.randomNum(0,this.contentWidth),this.randomNum(0,this.contentHeight),1,0,2 * Math .PI)

  ctx.fill()

  }

  }

  },

  观察:{

  identifyCode() {

  this.drawPic()

  }

  },

  已安装(){

  this.drawPic()

  }

  }

  /脚本

  父组件

  模板

  差异

  差异验证码测试/div

  div @ click= refresh code() class= code style= cursor:指针;title=点击切换验证码

  s-identify:识别码=识别码/s-identify

  /div

  /div

  /模板

  脚本

  从“vue”导入{定义组件};

  从" @/common/side entify。vue "导入侧面识别

  //从" axios "导入爱可信

  导出默认定义组件({

  名称:水印测试,

  组件:{ sIdentify },

  data() {

  返回{

  识别码:"",

  识别码:[0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , a , b , c , d],//根据实际需求加入自己想要的字符

  }

  },

  已安装(){

  this.refreshCode()

  },

  卸载(){

  },

  方法:{

  //生成随机数

  随机编号(最小值,最大值){

  最大=最大一

  回归数学。地板(数学。random()*(max-min)min);

  },

  //更新验证码

  refreshCode() {

  这个。识别代码=" ";

  这个。做代码(这个。识别代码,4);

  console.log(当前验证码:,这个。识别代码);

  },

  //随机生成验证码字符串

  makeCode(data,len) {

  console.log(数据,长度:,数据,长度)

  对于(设I=0;我leni ) {

  这个。识别码=这个。识别代码[这个。随机数(0,this.identifyCodes.length-1)]

  }

  },

  },

  });

  /脚本

  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • qq短信验证码发送失败怎么回事,qq验证码失败是怎么回事
  • ,,使用阿里大于(大鱼)平台进行发送手机验证码的流程
  • ,,SpringSceurity实现短信验证码登陆
  • android读取短信验证码,
  • android读取短信验证码,,Android使用MobSDK短信验证
  • android自动获取短信验证码功能在哪,安卓自动获取短信验证码
  • android自动获取短信验证码功能在哪,android自动获取短信验证码功能失效,Android自动获取短信验证码功能
  • android实现短信验证码自动填写功能是什么,安卓短信验证码自动填充 实现
  • android实现短信验证码自动填写功能是什么,安卓短信验证码自动填充 实现,Android实现短信验证码自动填写功能
  • android如何通过手机自动获取短信验证码信息,安卓自动获取短信验证码
  • android如何通过手机自动获取短信验证码信息,安卓自动获取短信验证码,Android如何通过手机自动获取短信验证码
  • ,,python网络爬虫实现发送短信验证码的方法
  • ,,Python实现滑块拼图验证码详解
  • ,,python3 破解 geetest(极验)的滑块验证码功能
  • 发验证码不在桌面显示,验证码能收到桌面上不显示怎么回事
  • 留言与评论(共有 条评论)
       
    验证码: