<view class="canvas-img-code" @click="clickCode">
<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"></canvas>
</view>
export default {
data() {
return {
form：{
check:'',//验证码
},
width: 120,
height: 45,
};
},
onShow() {
let that = this;
setTimeout(function() {
that .initCode();
}, 500)
},
methods: {
// 初始化验证码
initCode() {
console.log('start');
var context = uni.createCanvasContext('imgcanvas', this),
w = this.width,
h = this.height;
context.setFillStyle("white");
context.setLineWidth(5);
context.fillRect(0, 0, w, h);
var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q",
"R", "S",
"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
],
str = '';
for (var i = 0; i < 4; i++) {
var c = pool[this.rn(0, pool.length - 1)];
var deg = this.rn(-30, 30);
context.setFontSize(18);
context.setTextBaseline("top");
context.setFillStyle(this.rc(80, 150));
context.save();
context.translate(30 * i + 15, parseInt(h / 1.5));
context.rotate(deg * Math.PI / 180);
context.fillText(c, -15 + 5, -15);
context.restore();
str += c;
}
//生成的验证码在此写入缓存
console.log('验证码：', str);
uni.setStorage({
key: 'imgcode',
data: str,
});
for (var i = 0; i < 40; i++) {
context.beginPath();
context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
context.closePath();
context.setFillStyle(this.rc(150, 200));
context.fill();
}
context.draw();
console.log('end');
},
rc(min, max) {
var r = this.rn(min, max);
var g = this.rn(min, max);
var b = this.rn(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
},
rn(max, min) {
return parseInt(Math.random() * (max - min)) + min;
},
//点击验证码，切换
clickCode() {
this.initCode();
},
}
}
对验证码进行校验
//toLowerCase()将字母转为小写
console.log('验证码',uni.getStorageSync('imgcode'));
if(this.form.check.toLowerCase()!=uni.getStorageSync('imgcode').toLowerCase()){
uni.showToast({
icon:'none',
title:'验证码错误',
})
return;
}
————————————————
原文链接：https://blog.csdn.net/weixin_48495574/article/details/115701457
