SmartStorage/utils/mcaptcha.js

// mcaptcha.js

export class Mcaptcha {
    constructor(options) {
        this.options = options;
        this.fontSize = (options.height * 3) / 6;
        this.init();
        this.refresh();
    }
    init() {
        this.ctx = uni.createCanvasContext(this.options.el);
        this.ctx.setTextBaseline("middle");
        this.ctx.setFillStyle(this.randomColor(180, 240));
    }
    refresh() {
        var code = "";
        var txtArr = [
            "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",
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
        ];
        for (var i = 0; i < 4; i++) {
            code += txtArr[this.randomNum(0, txtArr.length)];
        }
        this.options.createCodeImg = code;
        let arr = (code + "").split("");
        if (arr.length === 0) {
            arr = ["e", "r", "r", "o", "r"];
        }
        let offsetLeft = (this.options.width * 0.6) / (arr.length - 1);
        let marginLeft = this.options.width * 0.2;
        arr.forEach((item, index) => {
            this.ctx.setFillStyle(this.randomColor(0, 180));
            let size = this.randomNum(24, this.fontSize);
            this.ctx.setFontSize(size);
            let dis = offsetLeft * index + marginLeft - size * 0.3;
            let deg = this.randomNum(-30, 30);
            this.ctx.translate(dis, this.options.height * 0.5);
            this.ctx.rotate((deg * Math.PI) / 180);
            this.ctx.fillText(item, 0, 0);
            this.ctx.rotate((-deg * Math.PI) / 180);
            this.ctx.translate(-dis, -this.options.height * 0.5);
        });
        for (var i = 0; i < 4; i++) {
            this.ctx.strokeStyle = this.randomColor(40, 180);
            this.ctx.beginPath();
            this.ctx.moveTo(
                this.randomNum(0, this.options.width),
                this.randomNum(0, this.options.height)
            );
            this.ctx.lineTo(
                this.randomNum(0, this.options.width),
                this.randomNum(0, this.options.height)
            );
            this.ctx.stroke();
        }
        for (var i = 0; i < this.options.width / 4; i++) {
            this.ctx.fillStyle = this.randomColor(0, 255);
            this.ctx.beginPath();
            this.ctx.arc(
                this.randomNum(0, this.options.width),
                this.randomNum(0, this.options.height),
                1,
                0,
                2 * Math.PI
            );
            this.ctx.fill();
        }
        this.ctx.draw();
    }
    validate(code) {
        var code = code.toLowerCase();
        var v_code = this.options.createCodeImg.toLowerCase();
        // console.log(code)
        // console.log(v_code.substring(v_code.length - 4))
        if (code == v_code.substring(v_code.length - 4)) {
            return true;
        } else {
            return false;
        }
    }
    randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    randomColor(min, max) {
        let r = this.randomNum(min, max);
        let g = this.randomNum(min, max);
        let b = this.randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
}