寫在前面
這裏是常用驗證碼的第二篇——算術驗證碼。
在上一篇已經實現了常用驗證碼之字符串驗證碼,感興趣的可以去看一下~
接下來要實現的就是字符串驗證碼了,先看下效果:
本篇記錄純前端寫算術驗證碼。
實現:算術驗證碼
一般來講,字符串、算數、gif、短信語音等驗證碼放在後端實現,但本着技術無界限的原則,前端依然是能照葫蘆畫瓢給實現出來的。
本次要實現的效果如下:
效果
分析
驗證碼實現步驟:
- canvas畫布
- 生成隨機100以內的簡單整數四則運算
- 隨機顏色
- 背景色(可固定色)
- 噪音線設置
- 繪製驗證碼
其他一些基礎內容也包含其中,如點擊驗證碼刷新、點擊下一步驗證等操作。
步驟實現:
注:本案例基於vue操作,UI使用element完成,原生js同樣道理
1. canvas畫布
html
<!-- 輸入框 -->
<input v-model="inputCode" placeholder="請輸入右側圖案的值" />
<!-- canvas畫布:驗證碼 -->
<canvas ref="checkCode" @click="getCode"></canvas>
<!-- 按鈕 -->
<button @click="checkMe">下一步</button>
js
// 需要的數據
data() {
return {
inputCode: '', // 輸入的值
checkCode: '', // 圖片驗證碼的值
expressValue: '', // 表達式的值
// canvas各種設置
cvs: {
w: 100, // 給出默認寬度 寬度會在圖片繪製時根據長度更改
h: 40, // 高 與input保持一致
fontSize: 24, // 字體大小
str: '+-*', // 符號生成範圍
line: 3 // 噪音線個數
}
}
}
2. 生成隨機表達式
- 寫一個隨機整數生成器,在各個環節都會用到
- 生成隨機字符串,長度是在
data
裏面cvs
中對應長度
// 隨機整數生成器,範圍[0, max)
rInt(max) {
return Math.floor(Math.random() * 100000 % max);
},
// 生成隨機表達式
rCode() {
let a = this.rInt(100);
let b = this.rInt(10);
let op = this.cvs.str.charAt(this.rInt(this.cvs.str.length));
// 表達式
let code = `${a}${op}${b}=`;
this.checkCode = code;
// 表達式的值
this.expressValue = eval(code.substr(0, code.length - 1));
return code;
},
3. 生成隨機顏色
- rgba格式
- a:透明度,取值爲0.5-1
// 生成隨機顏色 rgba格式
rColor() {
let a = ((Math.random()*5 + 5) / 10).toFixed(2);
return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`
},
4. 開始繪製
- 方法接收一個dom對象
- 判斷瀏覽器對canvas支持程度
- 取隨機字表達式
- 設置canvas寬高大小
- 繪製
具體過程如下:
// 驗證碼圖片繪製
drawCode(domCvs) {
let _this = this;
// 隨機表達式
let checkCode = this.rCode();
// 寬設置
this.cvs.w = 10 + this.cvs.fontSize * this.checkCode.length;
// 判斷是否支持canvas
if (domCvs !== null && domCvs.getContext && domCvs.getContext('2d')) {
// 設置顯示區域大小
domCvs.style.width = _this.cvs.w;
// 設置畫板寬高
domCvs.setAttribute('width', _this.cvs.w);
domCvs.setAttribute('height', _this.cvs.h);
// 畫筆
let pen = domCvs.getContext('2d');
// 背景: 顏色 區域
pen.fillStyle = '#eee';
pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
// 水平線位置
pen.textBaseline = 'middle'; // top middle bottom
// 內容
for (let i = 0; i < _this.checkCode.length; i++) {
pen.fillStyle = _this.rColor(); // 隨機顏色
pen.font = `bold ${_this.cvs.fontSize}px 微軟雅黑`; // 字體設置
// 字符繪製: (字符, X座標, Y座標)
pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 17 + _this.rInt(10));
}
// 噪音線
for (let i = 0; i < _this.cvs.line; i++) {
// 起點
pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h));
// 終點
pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h));
// 顏色
pen.strokeStyle = _this.rColor();
// 粗細
pen.lineWidth = '2';
// 繪製
pen.stroke();
}
} else {
this.$message.error('不支持驗證碼格式,請升級或更換瀏覽器重試');
}
},
5. 綁定canvas的dom元素
html
<canvas class="codeCanvas" ref="checkCode" @click="getCode"></canvas>
js:getCode方法
// vue的話可直接用$refs取值,不用vue的話可綁定id然後通過document處理
let domCvs = this.$refs.checkCode;
this.drawCode(domCvs);
6. 完成~
在頁面初始化的時候,也來一個驗證碼
點擊下一步, 驗證
data
中inputCode
和expressValue
的值是否一樣即可。注意,直接使用eval驗證即可頁面初始化
// 初始化先搞一個驗證碼~點擊canvas的時候重新執行getCode()
mounted() {
// 獲取驗證碼圖
this.getCode();
}
- 驗證
checkMe() {
// 空、 錯誤、 正確 三個判斷
if (this.inputCode) {
if (eval(this.inputCode) === eval(this.expressValue)) {
// 驗證成功要做的事
this.$message.success('驗證成功');
} else {
// 驗證碼有誤
this.$message.warning('錯誤,請重新輸入');
}
} else {
// 輸入爲空
this.$message.warning('請輸入右側結果');
}
}
結語
ok,常用的簡單算術驗證碼大致就是這樣子了~
本篇案例源碼可關注公衆號【流眸】回覆【20630】獲取喲~