前言

之前業務系統中驗證碼一直是由後端返回base64與一個驗證碼的字元串來實現的，想了下，前端其實可以直接canvas實現，減輕伺服器壓力。

實現

子組件，允許自定義圖片尺寸(預設尺寸為100 * 40)與驗證碼刷新時間(預設時間為60秒)。同時暴露繪製驗證碼方法drawPic(),允許父組件直接調用(需要利用ref實現)，點擊驗證碼也可手動刷新。

//VerifyCodeImg.vue
<!--驗證碼生成-->
<template>
    <canvas id="canvasDom" :width="props.canvasWidth" :height="props.canvasHeight" @click="drawPic"></canvas>
</template>

<script setup>
import { onMounted, onBeforeUnmount, computed } from 'vue';
let props = defineProps({
    canvasWidth: { // 容器寬度
        type: Number,
        default: 100
    },
    canvasHeight: { // 容器高度
        type: Number,
        default: 40
    },
    refreshTime: {//驗證碼刷新間隔時間
        type: Number,
        default: 60
    }
}),
    emits = defineEmits(['getVerifyCodeStr']),
    verifyCodeTimeId = null,//定時器id
    randomStr = '0123456789abcdefghijklmnopqrstuvwxyz',// 所有隨機字元串
    trueRefreshTime = computed(() => {
        return props.refreshTime * 1000;
    }),
    verifyCodeStr = '';//驗證碼字元串

onMounted(() => {
    initVerifyCodeImg();
});

// 初始化
const initVerifyCodeImg = () => {
    drawPic();
    verifyCodeTimeId = setInterval(() => {
        drawPic();
    }, trueRefreshTime.value);
};

// 繪製驗證碼圖片
const drawPic = () => {
    randomCode();
    let canvas = document.getElementById('canvasDom')
    let ctx = canvas.getContext('2d')
    ctx.textBaseline = 'bottom'
    // 繪製背景
    ctx.fillStyle = '#e6ecfd'
    ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight)
    // 繪製文字
    for (let i = 0; i < verifyCodeStr.length; i++) {
        drawText(ctx, verifyCodeStr[i], i)
    }
    drawLine(ctx)
    drawDot(ctx)
};

//4個隨機字元
const randomCode = () => {
    verifyCodeStr = ''
    for (let i = 0; i < 4; i++) {
        let txt = randomStr[randomNum(0, randomStr.length)];
        verifyCodeStr += txt;
    }
    emits('getVerifyCodeStr', verifyCodeStr);
};

// 隨機數
const randomNum = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min)
};

// 隨機色
const randomColor = (min, max) => {
    let r = randomNum(min, max)
    let g = randomNum(min, max)
    let b = randomNum(min, max)
    return 'rgb(' + r + ',' + g + ',' + b + ')'
};

// 繪製文字
const drawText = (ctx, txt, i) => {
    let fontSizeMin = 30,// 字體最小值
        fontSizeMax = 40;// 字體最大值
    ctx.fillStyle = randomColor(50, 160) // 隨機生成字體顏色
    ctx.font = randomNum(fontSizeMin, fontSizeMax) + 'px SimHei' // 隨機生成字體大小
    let x = (i + 1) * (props.canvasWidth / (verifyCodeStr.length + 1))
    let y = randomNum(fontSizeMax, props.canvasHeight - 5)
    var deg = randomNum(-30, 30)
    // 修改坐標原點和旋轉角度
    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)
};

// 繪製干擾線
const drawLine = (ctx) => {
    for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = randomColor(100, 200)
        ctx.beginPath()
        ctx.moveTo(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight))
        ctx.lineTo(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight))
        ctx.stroke()
    }
};

// 繪製干擾點
const drawDot = (ctx) => {
    // 繪製干擾點
    for (let i = 0; i < 30; i++) {
        ctx.fillStyle = randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight), 1, 0, 2 * Math.PI)
        ctx.fill()
    }
};

//暴露繪製圖片方法供父組件使用
defineExpose({
    drawPic
});

onBeforeUnmount(() => {
    clearInterval(verifyCodeTimeId);//頁面銷毀前，需要清除定時器
});

</script>

<style scoped lang='scss'>
#canvasDom {
    cursor: pointer;
}
</style>

父組件使用。

<VerifyCodeImg :refreshTime="1" ref="verifyCodeImgRef" @getVerifyCodeStr="getVerifyCodeStr" />

結語

上面是vue3的實現，你也可以改寫為vue2的。
原文鏈接：https://xiblogs.top/?id=63

原創者：曦12

原文鏈接：https://www.cnblogs.com/xi12/p/17804896.html

轉載請註明原創者添加原文鏈接！