vue输入验证码自动验证,vue项目登录获取验证码
这篇文章主要为大家详细介绍了某视频剪辑软件项目实现图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件项目实现图形验证码的具体代码，供大家参考，具体内容如下
效果预览：(项目要求清爽一点，所以没背景。但是下面的代码会把背景干扰写进去)
1.下载识别插件，命令：我确定的新公共管理
2.在你的成分目录新建一个某视频剪辑软件组件，我的命名是：侧面标识符。某视频剪辑软件
3.在组件内把下面的代码复制过去（可以自定义哈！)
模板
画布
画布id= s-canvas :width=内容宽度:height=内容高度/canvas
/div
/模板
脚本
导出默认值{
名称：侧面识别，
道具：{
识别码：{
类型：字符串，
默认值："1234"
},
fontSizeMin: {
类型：数量，
默认值：35
},
fontSizeMax: {
类型：数量，
默认值：35
},
backgroundColorMin: {
类型：数量，
默认值：180
},
backgroundColorMax: {
类型：数量，
默认值：240
},
colorMin: {
类型：数量，
默认值：50
},
colorMax: {
类型：数量，
默认值：160
},
lineColorMin: {
类型：数量，
默认值：100
},
lineColorMax: {
类型：数量，
默认值：200
},
dotColorMin: {
类型：数量，
默认值：0
},
dotColorMax: {
类型：数量，
默认值：255
},
内容宽度：{
类型：数量，
默认值：120
},
内容高度：{
类型：数量，
默认值：40
}
},
方法：{
//生成一个随机数
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)；
},
//生成一个随机的颜色
随机颜色(最小值，最大值){
设r=this.randomNum(min，max)；
设g=this.randomNum(min，max)；
设b=this.randomNum(min，max)；
返回" rgb( r ， g ， b )"；
},
透明(){
返回rgb(255，255，255)；
},
drawPic() {
让画布=文档。getelementbyid( s-canvas )；
让CTX=画布。获取上下文(“2d”)；
ctx.textBaseline= bottom
//绘制背景
//CTX。填充样式=this。随机颜色(
//this.backgroundColorMin，
//this.backgroundColorMax
//);
CTX。填充样式=this。透明()；
ctx.fillRect(0，0，this.contentWidth，this。内容高度)；
//绘制文字
对于(设I=0；我这个。识别代码。长度；i ) {
this.drawText(ctx，this.identifyCode[i]，I)；
}
//this.drawLine(ctx)
//this.drawDot(ctx)
},
drawText(ctx，txt，i) {
CTX。填充样式=this。随机颜色(这个。色敏，这个。color max)；
ctx.font=
这个。random num(这个。最小字体大小，这个。font size max) px sim hei ；
设x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度1))；
设y=这个。random num(这个。最大字体，这个。内容高度-5)；
var deg=this.randomNum(-10，10)；
//修改坐标原点和旋转角度
ctx.translate(x，y)；
ctx.rotate((deg * Math .PI)/180)；
ctx.fillText(txt，0，0)；
//恢复坐标原点和旋转角度
旋转((-deg * Math .PI)/180)；
ctx.translate(-x，-y)；
},
绘制线(ctx) {
//绘制干扰线
对于(设I=0；I 8；i ) {
CTX。笔画风格=这个。随机颜色(
this.lineColorMin，
this.lineColorMax
);
CTX。begin path()；
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。笔画()；
}
},
绘图点(ctx) {
//绘制干扰点
对于(设I=0；i 100i ) {
CTX。填充样式=this。颜色随机(0，255)；
CTX。begin path()；
ctx.arc(
this.randomNum(0，this.contentWidth)，
this.randomNum(0，this.contentHeight)，
1,
0,
2 *数学。产品改进(产品改进)
);
CTX。fill()；
}
}
},
观察：{
identifyCode() {
这个。画pic()；
}
},
已安装(){
这个。画pic()；
}
};
/脚本
4.在你需要验证码的页面引入组件并写好方法：
模板
div class= get-code @ click= refresh code()
s-identify:识别码=识别码/s-identify
/div
/模板
脚本
从" @/组件/侧面识别。vue "导入侧面识别
导出默认值{
组件：{ SIdentify }，
data() {
返回{
识别码："",
识别码：" 0123456789 abcdwerwshdjejkdhrjhkooplmkq "，//随便打的
}
},
方法：{
refreshCode() {//
这个。识别代码=" "；
这个。做代码(这个。识别代码，4)；
},
随机编号(最小值，最大值){
最大=最大一
回归数学。地板(数学。random()*(max-min)min)
},
//随机生成验证码字符串
makeCode (data，len) {
对于(设I=0；我leni ) {
这个。识别码=数据[这个。随机数(0，数据长度- 1)]
}
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。