nodejs 图片验证码

一：仅支持随机数字图片验证码

可设置图片背景颜色和数字颜色，图片为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>

效果：