104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
<template>
|
|
<view class="canvas-img-code">
|
|
<canvas v-if="verifyKey==''" :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"
|
|
@error="canvasIdErrorCallback"></canvas>
|
|
<image v-if="verifyKey!=''" :src="url" :style="{width:width+'px',height:height+'px'}"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex';
|
|
|
|
export default {
|
|
props: {
|
|
verifyKey: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
width: 75,
|
|
height: 45,
|
|
url: ""
|
|
}
|
|
},
|
|
computed: mapState([
|
|
'Config'
|
|
]),
|
|
watch: {
|
|
verifyKey(val) {
|
|
this.url = this.Config.URL.verifyCode + '?verify_key=' + val
|
|
},
|
|
},
|
|
mounted: function () {
|
|
this.url = `${this.Config.URL.verifyCode}?verify_key=${this.verifyKey}×tamp=${new Date().getTime()}&bg=#f8f8f8`
|
|
},
|
|
methods: {
|
|
init: function () {
|
|
this.url = `${this.Config.URL.verifyCode}?verify_key=${this.verifyKey}×tamp=${new Date().getTime()}&bg=#f8f8f8`
|
|
|
|
//console.log('start');
|
|
var context = uni.createCanvasContext('imgcanvas', this), w = this.width, h = this.height;
|
|
context.setFillStyle("#f8f8f8");
|
|
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)];//随机的字
|
|
var deg = this.rn(-30, 30);//字体的旋转角度
|
|
context.setFontSize(18);
|
|
context.setTextBaseline("top");
|
|
context.setFillStyle(this.rc(80, 150));
|
|
context.save();
|
|
context.translate(18 * i + 15, parseInt(h / 1.5));
|
|
context.rotate(deg * Math.PI / 180);
|
|
context.fillText(c, -15 + 5, -15);
|
|
context.restore();
|
|
str += c;
|
|
}
|
|
|
|
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: function (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: function (max, min) {
|
|
return parseInt(Math.random() * (max - min)) + min;
|
|
},
|
|
refresh: function () {
|
|
this.init();
|
|
},
|
|
canvasIdErrorCallback: function (e) {
|
|
console.error(e.detail.errMsg)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.canvas-img-code {
|
|
display: inline-block;
|
|
background-color: #f8f8f8;
|
|
height: 45px;
|
|
}
|
|
</style>
|