组件内容
<template>
<canvas
id="canvas"
ref="canvas"
:width="width"
:height="height"
@click="updateCanvas"
></canvas>
</template>
<script>
export default {
data() {
return {
ctx: null,
computedWidth: 0,
computedHeight: 0,
};
},
props: {
value: {
type: String,
default: "",
},
nums: {
type: Number,
default: 4,
},
width: {
type: Number,
default: 300,
},
height: {
type: Number,
default: 80,
},
color: String,
fillStyle: {
type: String,
default: "#fff",
},
randomLine: {
type: Boolean,
default: false,
},
clickUpdate: {
type: Boolean,
default: true,
},
},
mounted() {
const ramdomStr = this.getRandomStr();
this.initCanvas();
this.setCanvas(ramdomStr);
},
methods: {
initCanvas() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext("2d");
const computedStyle = getComputedStyle(canvas);
this.ctx = ctx;
this.computedWidth = parseFloat(computedStyle.width);
this.computedHeight = parseFloat(computedStyle.height);
ctx.fillStyle = this.fillStyle;
ctx.fillRect(0, 0, this.computedWidth, this.computedHeight);
this.randomLine && this.setRandomLine(ctx);
},
getRandomStr() {
const _str =
"abcdefghijkmlnopQrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let randomStr = "";
if (!this.value) {
for (var i = 0; i < this.nums; i++) {
randomStr += _str[Math.floor(Math.random() * _str.length)];
}
} else {
randomStr = this.value;
}
this.$emit("getImgCode", randomStr);
return randomStr;
},
setRandomLine(ctx) {
const computedWidth = this.computedWidth;
const computedHeight = this.computedHeight;
const nums = this.nums;
const lineNums = Math.floor(computedWidth / nums);
for (let i = 0; i < lineNums; i++) {
ctx.save();
ctx.beginPath();
ctx.strokeStyle = this.getRandomRgb();
ctx.translate(
10 + i * (computedWidth / lineNums),
Math.random() * computedHeight
);
ctx.rotate(this.getRandomDeg());
ctx.moveTo(0, 0);
ctx.lineTo(0, Math.random() * computedHeight);
ctx.stroke();
ctx.restore();
}
},
setCanvas(str) {
const len = str.length;
const ctx = this.ctx;
const fontsize = this.setFont();
const computedHeight = this.computedHeight;
const computedWidth = this.computedWidth;
ctx.font = `${fontsize}px sans-serif`;
ctx.save();
for (let i = 0; i < len; i++) {
const scaleBase = Math.random() > 0.5 ? 1.1 : 0.9;
const randomRgb = this.getRandomRgb();
ctx.fillStyle = this.color ?? randomRgb;
ctx.translate(
(computedWidth - fontsize * 4) / len + fontsize * i,
parseFloat(computedHeight) / 2
);
ctx.rotate(this.getRandomDeg());
ctx.scale(scaleBase, scaleBase);
ctx.textBaseline = "middle";
ctx.fillText(str[i], 0, 0);
ctx.restore();
ctx.save();
}
},
updateCanvas() {
if (!this.clickUpdate) return;
const ctx = this.ctx;
const ramdomStr = this.getRandomStr();
ctx.clearRect(0, 0, this.computedWidth, this.computedHeight);
this.initCanvas();
this.setCanvas(ramdomStr);
},
getRandomDeg() {
return (Math.PI / 180) * (-45 + Math.random() * 90);
},
getRandomRgb() {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
Math.random() * 255
)},${Math.floor(Math.random() * 255)})`;
},
setFont() {
let fontsize = this.computedWidth / (this.nums * 1.1);
if (fontsize >= this.computedHeight) {
fontsize = this.computedHeight * 0.8;
}
return fontsize;
},
},
};
</script>
组件参数
## 属性
value：图形验证码内容（由后端提供时填写）
nums: 验证码长度(number)，默认：4
width: 图形验证码宽度(number)
height: 图形验证码高度(number)
color: 图形验证码内容颜色(string)
fillStyle：图形验证码填充颜色(string)
randomLine：是否开启随机干扰线条(boolean)
clickUpdate：是否开启点击更新图形验证码(boolean)
## 事件
getImgCode: 获取图形验证码内容
效果
?
?
?
