基于Canvas的本地验证码vue组件

最新推荐文章于 2025-04-14 15:20:09 发布

I1326

最新推荐文章于 2025-04-14 15:20:09 发布

阅读量158

点赞数

分类专栏： canvas javascript vue 文章标签： canvas vue.js 验证码

原文链接：https://blog.youkuaiyun.com/hjhfreshman/article/details/90065040

版权

javascript 同时被 3 个专栏收录

22 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

canvas

2 篇文章

订阅专栏

基于Canvas的本地验证码vue组件

最近给外包填个坑，发现验证码因为hash问题导致同服务端校验一直不通过，访问量也不高直接在本地创建个简易算号器，后来觉得实在丑的难受baidu了个现成的基于canvas的算号器，感谢原作者卡卡欧文的分享；

效果如下
在这里插入图片描述

直接贴代码

<template>
    <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="handleClick"></canvas>
    </div>
</template>

export default {
        name: 'SIdentify',
        data () {
            return {
                identifyCode: ''
            };
        },
        props: {
            fontSizeMin: {
                type: Number,
                default: 32
            },
            fontSizeMax: {
                type: Number,
                default: 40
            },
            backgroundColorMin: {
                type: Number,
                default: 180
            },
            backgroundColorMax: {
                type: Number,
                default: 240
            },
            colorMin: {
                type: Number,
                default: 50
            },
            colorMax: {
                type: Number,
                default: 160
            },
            lineColorMin: {
                type: Number,
                default: 40
            },
            lineColorMax: {
                type: Number,
                default: 180
            },
            dotColorMin: {
                type: Number,
                default: 0
            },
            dotColorMax: {
                type: Number,
                default: 255
            },
            contentWidth: {
                type: Number,
                default: 136
            },
            contentHeight: {
                type: Number,
                default: 48
            }
        },
        methods: {
            // 点击生成随机数 并传给调用它的组件（父组件用changeCode接收）
            handleClick () {
                let num = '';
                for (let i = 0; i < 4; i++) {
                    num += Math.floor(Math.random() * 10);
                }
                this.identifyCode = num;
                let newN = this.identifyCode;
                this.$emit('changeCode', newN);
            },
            // 生成一个随机数
            randomNum (min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            // 生成一个随机的颜色
            randomColor (min, max) {
                var r = this.randomNum(min, max);
                var g = this.randomNum(min, max);
                var b = this.randomNum(min, max);
                return 'rgb(' + r + ',' + g + ',' + b + ')';
            },
            drawPic () {
                var canvas = document.getElementById('s-canvas');
                var ctx = canvas.getContext('2d');
                ctx.textBaseline = 'bottom';
                // 绘制背景
                ctx.fillStyle = this.randomColor(
                    this.backgroundColorMin,
                    this.backgroundColorMax
                );
                ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
                // 绘制文字
                for (let i = 0; i < this.identifyCode.length; i++) {
                    this.drawText(ctx, this.identifyCode[i], i);
                }
                this.drawLine(ctx);
                this.drawDot(ctx);
            },
            drawText (ctx, txt, i) {
                ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
                ctx.font =
                    this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei';
                var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
                var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
                var deg = this.randomNum(-45, 45);
                // 修改坐标原点和旋转角度
                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(txt, 0, 0);
                // 恢复坐标原点和旋转角度
                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
            },
            drawLine (ctx) {
                // 绘制干扰线
                for (let i = 0; i < 8; i++) {
                    ctx.strokeStyle = this.randomColor(
                        this.lineColorMin,
                        this.lineColorMax
                    );
                    ctx.beginPath();
                    ctx.moveTo(
                        this.randomNum(0, this.contentWidth),
                        this.randomNum(0, this.contentHeight)
                    );
                    ctx.lineTo(
                        this.randomNum(0, this.contentWidth),
                        this.randomNum(0, this.contentHeight)
                    );
                    ctx.stroke();
                }
            },
            drawDot (ctx) {
                // 绘制干扰点
                for (let i = 0; i < 100; i++) {
                    ctx.fillStyle = this.randomColor(0, 255);
                    ctx.beginPath();
                    ctx.arc(
                        this.randomNum(0, this.contentWidth),
                        this.randomNum(0, this.contentHeight),
                        1,
                        0,
                        2 * Math.PI
                    );
                    ctx.fill();
                }
            }
        },
        watch: {
            identifyCode () {
                this.drawPic();
            }
        },
        mounted () {
            this.drawPic();
            this.handleClick();
        }
    };