vue中captcha.js生成驗證碼
阿新 • • 發佈:2021-02-01
vue中captcha.js生成驗證碼
轉載來自於:連結
一.本地引入
1.下載:
git clone https://github.com/saucxs/captcha.git
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');
});
樣式: