canvas-code

canvas验证码

安装

npm i @kevin5979/canvas-code

引用

// main.js
import Vue from 'vue';
import CanvasCode from "@kevin5979/canvas-code";
import "@kevin5979/canvas-code/canvas-code.css";
Vue.use(CanvasCode);

<canvas-code
    :width="150"
    :height="50"
    :numLen="4"
    :lineLen="4"
    :dotLen="30"
    :angle="30"
    ref="canvas-code"
 />

// width: 宽度
// height: 高度
// numLen: 数字的个数
// lineLen: 干扰线条个数
// dotLen: 干扰点个数
// angle: 最大随机倾斜角度

// 刷新
this.$refs["canvas-code"].refreshCanvas();

// 验证
if(this.$refs["canvas-code"].verifyCode(value))
{
   console.log("验证成功")
}