一:仅支持随机数字图片验证码
可设置图片背景颜色和数字颜色,图片为base64格式
二:需要引入captchapng模块
模块下载地址:https://github.com/GeorgeChan/captchapng
var captchapng = require('captchapng');
三:实现
nodejs:
/*
* 生成数字随机数图片验证码
*
* @description 仅支持生成随机数字图片验证码,
* */
getIcode (req,res,next){
//返回统一格式赋值
//var response = _.extend({},responseData);
var response = {};
console.log('开始获取图片验证码。。。。。。');
var capt = new captchapng(80,30,parseInt(Math.random()*9000+1000)); // 图片宽度,图片高度,随机数字
capt.color(0, 0, 0, 0); // First color: 图片背景色 (red, green, blue, alpha)
capt.color(80, 80, 80, 255); // Second color: 数字颜色 (red, green, blue, alpha)
//转换成base64
var icodeImg = capt.getBase64();
response.data = {
'content': icodeImg
};
res.send(response);
}
javascript:
/*
* 更新图片验证码
*
* @param imgSrc {string} 验证码图片链接
* */
function updateIcode(data){
$('#icode-btn').empty().html('<img src="data:image/jpg;base64,'+ data.content +'" />');
console.log('图片验证码已更新');
}
/*
* 获取图片验证码
*
* */
async function getIcode(){
//异步获取图片验证码 async事件
//var data = await util.es6Get('/api/user/icode',{type: 'img'});
var data = await $.ajax({
url: '/api/user/icode',
type: 'get',
dataType: 'json',
success: function(data){
},
error: function(e){
}
});
//失败
if(data.error === true){
console.log('失败:'+ data.message);
return false;
}
//成功
//更新图片验证码
updateIcode(data.data);
}
html:
<div class="container main mb50">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-xs-12 col-xs-offset-0">
<h2 class="text-center">注册</h2>
<form class="form-horizontal mt50" id="regist-wrap">
<div class="form-group form-group-lg mb30">
<label for="username" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group form-group-lg mb30">
<label for="password" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group form-group-lg mb30">
<label for="repassword" class="col-sm-3 control-label">确认密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="repassword" id="repassword" placeholder="请再次输入密码">
</div>
</div>
<div class="form-group form-group-lg mb30">
<label for="icode" class="col-sm-3 control-label">验证码</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="icode" id="icode" placeholder="请输入验证码">
</div>
<div class="col-sm-2">
<span class="icode-wrap" id="icode-btn"></span>
</div>
</div>
<div class="form-group mt40">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary btn-block btn-lg" id="regist-btn">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
效果: