影片直播系統原始碼，vue中captcha.js生成驗證碼

影片直播系統原始碼，vue中captcha.js生成驗證碼

一.本地引入

1.下載：

git clone 

2.下載到本地以後引入：

<script type="text/javascript" src="./captcha.js"></script>

3.容器：

<canvas width="240" height="90" id="captcha1"></canvas>

4.js程式碼：dom載入完畢以後

1）預設：

/*不傳值，統一走預設值*/
    let captcha1 = new Captcha();
    captcha1.draw(document.querySelector('#captcha1'), r => {
        console.log(r, '驗證碼1');
    });

2）自定義：

let captcha2 = new Captcha({
        lineWidth: 1,   //線條寬度
        lineNum: 6,       //線條數量
        dotR: 2,          //點的半徑
        dotNum: 25,       //點的數量
        preGroundColor: [10, 80],    //前景色區間
        backGroundColor: [150, 250], //背景色區間
        fontSize: 30,           //字型大小
        fontFamily: ['Georgia', '微軟雅黑', 'Helvetica', 'Arial'],  //字型型別
        fontStyle: 'stroke',      //字型繪製方法，有fill和stroke
        content: '一個驗證碼abcdefghijklmnopqrstuvw生成的外掛使用的是canvas顯示',  //驗證碼內容
        length: 6    //驗證碼長度
    }); 
    captcha2.draw(document.querySelector('#captcha2'), r => {
        console.log(r, '驗證碼2');
    });

二.npm引入

1.安裝元件

npm install captcha-mini

2.引入模組

import Captcha from 'captcha-mini'

或者

var Captcha = require("captcha-mini")

3.dom載入完以後的js

1）預設用法：

/*不傳值，統一走預設值*/
    let captcha1 = new Captcha();
    captcha1.draw(document.querySelector('#captcha1'), r => {
        console.log(r, '驗證碼1');
    });

2）自定義用法：

/*自定義內容和樣式*/
    let captcha2 = new Captcha({
        lineWidth: 1,   //線條寬度
        lineNum: 6,       //線條數量
        dotR: 2,          //點的半徑
        dotNum: 25,       //點的數量
        preGroundColor: [10, 80],    //前景色區間
        backGroundColor: [150, 250], //背景色區間
        fontSize: 30,           //字型大小
        fontFamily: ['Georgia', '微軟雅黑', 'Helvetica', 'Arial'],  //字型型別
        fontStyle: 'stroke',      //字型繪製方法，有fill和stroke
        content: '一個驗證碼abcdefghijklmnopqrstuvw生成的外掛使用的是canvas顯示',  //驗證碼內容
        length: 6    //驗證碼長度
    }); 
    captcha2.draw(document.querySelector('#captcha2'), r => {
        console.log(r, '驗證碼2');
    });

 以上就是 影片直播系統原始碼，vue中captcha.js生成驗證碼，更多內容歡迎關注之後的文章