VUE图形验证码组件
<!--//图形验证码组件--->
<!--//使用须知把文件名改为 Verification.vue --->
<template>
<div>
<p id="container">
<canvas width="100" height="40" id="verifyCanvas"></canvas>
<img id="code_img" @click="reset_img">
</p>
</div>
</template>
<script>
/*
主组件写入以下内容
//div里写入组件
<verification></verification>
//事件中转总线
// eventBus.js: import Vue from 'vue'
export default new Vue
//引入组件和事件中转总线
import verification from '../components/Verification'
import Bus from '../assets/util/eventBus.js'
//定义组件
components: {
'verification': verification
},
//在mounted里监听事件
mounted() {
var that = this;
Bus.$on("changeCode", function(val) {
that.code_val1 = val
})
},
*/
import Bus from '../assets/util/eventBus.js'
export default {
name: "Verification",
data() {
return {
nums: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
}
},
created() {
},
mounted() {
this.drawCode();
},
methods: {
drawCode() {
var that = this;
var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
var context = canvas.getContext("2d"); //获取画布2D上下文
context.fillStyle = "#D0E4B6"; //画布填充色
context.fillRect(0, 0, canvas.width, canvas.height);
// 创建渐变
var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0", "#8F3983");
gradient.addColorStop("0.5", "#8F5E42");
gradient.addColorStop("1.0", "#4B4679");
//清空画布
context.fillStyle = gradient; //设置字体颜色
context.font = "25px Arial"; //设置字体
var rand = new Array();
var x = new Array();
var y = new Array();
for(var i = 0; i < 4; i++) {
rand[i] = that.nums[Math.floor(Math.random() * that.nums.length)]
x[i] = i * 16 + 10;
y[i] = Math.random() * 20 + 20;
context.fillText(rand[i], x[i], y[i]);
}
//在主组件中加载完dom后再发送事件，不然无法监听
that.$nextTick(function() {
// DOM 现在更新了
var newRand = rand.join('').toUpperCase();
Bus.$emit('changeCode', newRand)
})
//画3条随机线
for(var i = 0; i < 3; i++) {
that.drawline(canvas, context)
}
// 画30个随机点
for(var i = 0; i < 30; i++) {
that.drawDot(canvas, context)
}
that.convertCanvasToImage(canvas)
},
drawline(canvas, context) {
context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
context.lineWidth = 0.5; //随机线宽
context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性
context.stroke(); //描边，即起点描到终点
},
drawDot(canvas, context) {
var px = Math.floor(Math.random() * canvas.width);
var py = Math.floor(Math.random() * canvas.height);
context.moveTo(px, py);
context.lineTo(px + 1, py + 1);
context.lineWidth = 0.2;
context.stroke();
},
convertCanvasToImage(canvas) {
document.getElementById("verifyCanvas").style.display = "none";
var image = document.getElementById("code_img");
image.src = canvas.toDataURL("image/png");
return image;
},
reset_img() {
var that = this;
var idObject = document.getElementById('verifyCanvas');
var container = document.getElementById('container');
if(idObject != null) {
idObject.parentNode.removeChild(idObject);
var cont = document.createElement('canvas');
cont.setAttribute('id', 'verifyCanvas')
cont.setAttribute('width', '100')
cont.setAttribute('height', '40')
container.appendChild(cont);
that.drawCode();
} else {
alert("报错！")
}
}
}
}
</script>
<style scoped>
#verify {
height: 34px;
vertical-align: top;
font-size: 16px;
}
#code_img {
width: 100px;
height: 40px;
cursor: pointer;
vertical-align: top;
}
</style>
