生成图形验证码

/**
 * 生成一个随机数
 * @param {number} min 最小值
 * @param {number} max 最大值
 * @returns 
 */
const randomMumber = (min = 0, max = 10) => Math.floor(Math.random() * (max - min) + min);

/**
 * 生成图形验证码
 * @param {string} character 字符
 * @param {number} width 图片宽
 * @param {number} height 图片高
 * @returns 
 */
const verificationCodeImage = (character = "0000", width = 128, height = 40) => {
    // 创建canvas
    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let ctx = canvas.getContext("2d");
    ctx.textBaseline = "bottom";
    // 绘制背景
    ctx.fillStyle = `rgb(${randomMumber(200, 220)},${randomMumber(200, 220)},${randomMumber(200, 220)})`;
    ctx.fillRect(0, 0, width, height);
    // 绘制文字
    for (let i = 0; i < character.length; i++) {
        //随机生成字体颜色
        ctx.fillStyle = `rgb(${randomMumber(50, 160)},${randomMumber(50, 160)},${randomMumber(50, 160)})`;
        //随机生成字体大小
        ctx.font = randomMumber(25, 35) + "px SimHei";
        let x = (i + 1) * (width / (character.length + 1));
        let y = randomMumber(35, height - 5);
        let deg = randomMumber(-30, 30);
        // 修改坐标原点和旋转角度
        ctx.translate(x, y);
        ctx.rotate((deg * Math.PI) / 180);
        ctx.fillText(character[i], 0, 0);
        // 恢复坐标原点和旋转角度
        ctx.rotate((-deg * Math.PI) / 180);
        ctx.translate(-x, -y);
    }

    // 绘画干扰线
    for (let i = 0; i < 10; i++) {
        ctx.strokeStyle = `rgb(${randomMumber(100, 200)},${randomMumber(100, 200)},${randomMumber(100, 200)})`;
        ctx.beginPath();
        ctx.moveTo(randomMumber(0, width), randomMumber(0, height));
        ctx.lineTo(randomMumber(0, width), randomMumber(0, height));
        ctx.stroke();
    }

    // 绘画干扰点
    for (let i = 0; i < 48; i++) {
        ctx.fillStyle = randomMumber(0, 255);
        ctx.beginPath();
        ctx.arc(randomMumber(0, width), randomMumber(0, height), 1, 0, 2 * Math.PI);
        ctx.fill();
    }

    return canvas.toDataURL('image/jpeg');
};