此方法需要nodejs 安装canvas 扩展
准备工作
以Linux为例
1、服务器gcc版本需4.8以上
2、安装所需扩展
yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel
3、安装canvas 扩展
npm install canvas
使用方法
示例代码
nodejs代码
1 /** 2 * 生成验证码 3 */ 4 5 var MdCode = module.exports; 6 var Consts = require('../comm/consts.js'); 7 var Canvas = require('canvas'); 8 9 10 function randomNum(min,max){ 11 return Math.floor(Math.random()*(max-min)+min); 12 } 13 14 function randomColor(min,max){ 15 var _r = randomNum(min,max); 16 var _g = randomNum(min,max); 17 var _b = randomNum(min,max); 18 return "rgb("+_r+","+_g+","+_b+")"; 19 } 20 21 var getRandom = function(start,end){ 22 return start + Math.random() * (end - start); 23 }; 24 25 MdCode.create = function(params, req, callback) { 26 var width = 120; 27 var height = 35; 28 var canvas = new Canvas(width, height); 29 var ctx = canvas.getContext('2d'); 30 // ctx.textBaseline = 'bottom'; 31 //** 绘制背景色 **// 32 //颜色若太深可能导致看不清 33 ctx.fillStyle = randomColor(180,250); 34 ctx.fillRect(0, 0, width, height); 35 var code = ""; 36 37 //** 绘制文字 **// 38 var start = 10; 39 var font = 'bold 20px arial'; 40 var trans = {c:[-0.108, 0.108],b:[-0.05, 0.05]}; 41 var str = 'abcdefghijklmnpqrstuvwxyz123456789'; 42 for(var i = 0; i < 4; i++) { 43 var txt = str[randomNum(0, str.length)]; 44 code += txt; 45 ctx.font = font; 46 ctx.fillStyle = randomColor(50, 160); 47 ctx.fillText(txt, start, 23, 10); 48 ctx.fillRect(); 49 var c = getRandom(trans['c'][0],trans['c'][1]); 50 var b = getRandom(trans['b'][0],trans['b'][1]); 51 ctx.transform(1,b, c, 1, 0, 0); 52 start += 28; 53 54 } 55 56 //*** 绘制干扰线 ***// 57 for(var i = 0; i < 4; i++) { 58 ctx.strokeStyle = randomColor(40, 180); 59 ctx.beginPath(); 60 ctx.moveTo( randomNum(0,width), randomNum(0,height) ); 61 ctx.lineTo( randomNum(0,width), randomNum(0,height) ); 62 ctx.stroke(); 63 } 64 // ** 绘制干扰点 ** // 65 for (var i = 0; i < 50; i++) { 66 ctx.fillStyle = randomColor(0,255); 67 ctx.beginPath(); 68 ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI); 69 ctx.fill(); 70 } 71 72 73 var buf = canvas.toDataURL(); 74 var result = {}; 75 result.statusCode = 0; 76 // buf为主要显示图像的数据 77 result.data = buf; 78 result.code = code; 79 80 // 保存到session 用来验证 81 req.session.code = code; 82 83 // 返还客户端 84 callback(result); 85 86 }
html代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>验证码</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 6 <meta content="width=device-width, initial-scale=1.0" name="viewport" /> 7 <script type="text/javascript" src="/js/jquery.min.js"></script> 8 </head> 9 <body> 10 <h3 class="loginTitle contrast-blue">验证码</h3> 11 <div style="height: 80px;"> 12 <label>验证码: </label> 13 <input type="text" style=" 40%;" name="code" /> 14 <img id="img_code" src="" style="100px;height:38px;vertical-align:bottom;position: relative;top: -38px;left: 200px;display: none;" title="点击刷新验证码" /> 15 </div> 16 </body> 17 </html> 18 <script type="text/javascript"> 19 // 刷新验证码 20 function refreshCode(){ 21 $.ajax({ 22 type: "get", 23 dataType: "json", 24 url: "/code", 25 success: function(msg){ 26 $("#img_code").css('display', 'block'); 27 $("#img_code").attr('src', msg.data); 28 29 } 30 }); 31 } 32 33 34 $(document).ready(function() { 35 refreshCode(); 36 }); 37 $('#img_code').click(function(){ 38 refreshCode(); 39 }) 40 41 </script>
效果预览 == 》 