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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。