vue 生成随机验证码，数字加减 （单页面）
首先需要进入html2canvas.js
原来是生成海报的，改了改，改成生成验证码的了
仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/public.js"></script>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/html2canvas.js"></script>
<style>
.haibao{position:absolute;top:0;left:0;width:4rem;z-index:0;width: 2.3rem;height: 1rem;line-height: 1rem; text-align: center;}
.haibao span{font-size: .6rem;font-weight: bold;}
.image{margin-top: 2rem;}
</style>
</head>
<body>
<div id="app" class="app" v-cloak>
<p class="image">生成的图</p>
<div class="myImage" @click="poster()" id="myImage" v-html="image"></div>
<!-- 验证码背景 -->
<div id="main-container" ref="container" class="haibao" :style="{'backgroundColor': colorBg}">
<span :style="[{'color': item.color,'fontStyle':item.font}]" v-for="(item,index) in list":key="index">{{item.text}}</span>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{text: '1'},
{text: '+'},
{text: '1'},
{text: '='},
{text: '?'},
],
colorBg: '',
result: '',
image:'',
},
methods: {
poster() {
this.image = '';
this.colorBg = this.colorFun();
this.list.forEach((item, index) => {
item['color'] = this.colorFun();
item['font'] = this.fontFun();
index == 0 ? item.text = this.numberFun(1) : '';
index == 1 ? item.text = this.operationFun(1) : '';
index == 2 ? item.text = this.numberFun(2) : '';
})
this.makePoster('main-container')
},
makePoster: function(id) { //生成验证码
var _this = this;
document.body.style.overflow = 'hidden';
this.$refs.container.style.pointerEvents = 'auto';
this.$nextTick(function() {
// 如正在生成时不再生成
if (this.isEnd) {
return;
}
this.isEnd = true;
_this.makeCode(id); //生成验证码
});
},
makeCode(id) { //生成验证码
this.$refs.container.style.disblock = 'block';
var _this = this;
var shareContent = document.getElementById(id); // 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生）dom 宽度
var height = shareContent.offsetHeight; // 获取(原生）dom 高
var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量
var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = 2;
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
context.scale(scaleBy, scaleBy);
var opts = {
scale: scaleBy, //添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关，发布的时候记得改成false
width: width, //dom 原始宽度
height: height, //dom 原始高度
backgroundColor: "transparent",
};
html2canvas(document.querySelector('#' + id), opts).then(function(canvas) {
document.body.appendChild(canvas);
let oImg = new Image();
oImg.src = canvas.toDataURL("image/png"); // 导出图片
vm.image = '<img src="'+oImg.src+'"/>'
vm.isEnd = false;
vm.shadowHb = true;
});
this.result = eval(this.list[0].text + this.list[1].text + this.list[2].text);
},
colorFun() { //随机颜色
return `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`;
},
fontFun() { //随机字体样式
return this.randomNum(0, 1) == 0 ? 'normal' : 'italic'
},
randomNum(min, max) { //随机数范围
var range = max - min;
var rand = Math.random();
var num = min + Math.round(rand * range);
return num;
},
numberFun(type) { //随机数字
return type == 1 ? this.randomNum(10, 30) : this.randomNum(0, 9)
},
operationFun() { //随机运算符
return this.randomNum(0, 1) == 0 ? '+' : '-'
}
},
mounted() {
// 生成随机验证码
this.poster();
},
created() {
}
});
</script>
