此方法需要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代码

 /**

  * 生成验证码

  */

 var MdCode = module.exports;

 var Consts = require('../comm/consts.js');

 var Canvas = require('canvas');

 function randomNum(min,max){

     return Math.floor(Math.random()*(max-min)+min);

 }

 function randomColor(min,max){

     var _r = randomNum(min,max);

     var _g = randomNum(min,max);

     var _b = randomNum(min,max);

     return "rgb("+_r+","+_g+","+_b+")";

 }

 var getRandom = function(start,end){

     return start + Math.random() * (end - start);

 };

 MdCode.create = function(params, req, callback) {

     var width = 120;

     var height = 35;

     var canvas = new Canvas(width, height);

     var ctx = canvas.getContext('2d');

     // ctx.textBaseline = 'bottom';

     //** 绘制背景色 **//

     //颜色若太深可能导致看不清

     ctx.fillStyle = randomColor(180,250);

     ctx.fillRect(0, 0, width, height);

     var code = "";

     //** 绘制文字 **//

     var start = 10;

     var font = 'bold 20px arial';

     var trans = {c:[-0.108, 0.108],b:[-0.05, 0.05]};

     var str = 'abcdefghijklmnpqrstuvwxyz123456789';

     for(var i = 0; i < 4; i++) {

         var txt = str[randomNum(0, str.length)];

         code += txt;

         ctx.font = font;

         ctx.fillStyle = randomColor(50, 160);

         ctx.fillText(txt, start, 23, 10);

         ctx.fillRect();

         var c = getRandom(trans['c'][0],trans['c'][1]);

         var b = getRandom(trans['b'][0],trans['b'][1]);

         ctx.transform(1,b, c, 1, 0, 0);

         start += 28;

     }

     //*** 绘制干扰线 ***//

     for(var i = 0; i < 4; i++) {

         ctx.strokeStyle = randomColor(40, 180);

         ctx.beginPath();

         ctx.moveTo( randomNum(0,width), randomNum(0,height) );

         ctx.lineTo( randomNum(0,width), randomNum(0,height) );

         ctx.stroke();

     }

     // ** 绘制干扰点 ** //

     for (var i = 0; i < 50; i++) {

         ctx.fillStyle = randomColor(0,255);

         ctx.beginPath();

         ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);

         ctx.fill();

     }

     var buf = canvas.toDataURL();

     var result = {};

     result.statusCode = 0;

     // buf为主要显示图像的数据

     result.data = buf;

     result.code = code;

     // 保存到session 用来验证

     req.session.code = code;

     // 返还客户端

     callback(result);

 }

html代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html>

     <head>

         <title>验证码</title>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

         <meta content="width=device-width, initial-scale=1.0" name="viewport" />

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

     </head>

     <body>

         <h3 class="loginTitle contrast-blue">验证码</h3>

         <div style="height: 80px;">

             <label>验证码: </label>

             <input type="text" style="width: 40%;" name="code" />

             <img id="img_code" src="" style="width:100px;height:38px;vertical-align:bottom;position: relative;top: -38px;left: 200px;display: none;" title="点击刷新验证码" />

         </div>

     </body>

 </html>

 <script type="text/javascript">

     // 刷新验证码

     function refreshCode(){

         $.ajax({

             type: "get",

             dataType: "json",

             url: "/code",

             success: function(msg){

                 $("#img_code").css('display', 'block');

                 $("#img_code").attr('src', msg.data);

             }

         });

     }

     $(document).ready(function() {

         refreshCode();

     });

     $('#img_code').click(function(){

         refreshCode();

     })

 </script>

效果预览  == 》 

nodejs 生成验证码的更多相关文章

  1. 动态生成验证码———MVC版

    上面有篇博客也是写的验证码,但那个是适用于asp.net网站的. 今天想在MVC中实现验证码功能,弄了好久,最后还是看博友文章解决的,感谢那位博友. 首先引入生成验证码帮助类. ValidateCod ...

  2. laravel 生成验证码的方法

    在Laravel中有很多图片验证码的库可以使用,本篇介绍其中之一:gregwar/captcha,这个库比较简单,在Laravel中比较常用.下面我们就来介绍下使用细节: 首先, composer.j ...

  3. java web学习总结(九) -------------------通过Servlet生成验证码图片

    一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:

  4. android 生成验证码图片

    (转自:http://blog.csdn.net/onlyonecoder/article/details/8231373) package com.nobeg.util; import java.u ...

  5. PHP 动态生成验证码

    ……机器人会在网站中搜寻允许他们插入广告的输入表单,在虚拟世界没有什么能阻挡它们胡作非为.这些机器人效率极高,完全不关心所攻击的表单的本来用途.它们唯一的目标就是用它们的垃圾广告覆盖你的内容,残忍地为 ...

  6. PHP生成验证码及单实例应用

    /* note: * this 指向当前对象本身 * self 指向当前类 * parent 指向父类 */ /* 验证码工具类 * @author pandancode * @date 20150- ...

  7. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

  8. PHP-仿ecshop生成验证码

    <?php /* 生成验证码 */ // 1.创建画布(基于已有图像) $n = mt_rand(1,5); $im = imagecreatefromjpeg('./images/captch ...

  9. Java生成验证码原理（jsp）

     验证码的作用: 验证码是Completely Automated Public Turing test to tell Computers and Humans Apart(全自动区分计算机和人类的 ...

随机推荐

  1. java IO流文件的读写具体实例(转载)

    引言: 关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽.上次突然一个同事问了我java文件的读取,我一下子就懵了第一反应就是去网上找,虽然也能 ...

  2. UVA-12293(组合游戏)

    题意: 有两个相同的盒子,一个盒子里面有n个球,另一个盒子里面有1个球,每次清空球较少的那个盒子,然后从另外的一个盒子里拿到空盒子里使得操作后两个盒子至少有一个球,判断是先手还是后者胜; 思路: 跟每 ...

  3. 自然语言处理：问答 + CNN 笔记

    参考 Applying Deep Learning To Answer Selection: A Study And An Open Task follow: http://www.52nlp.cn/ ...

  4. Can't locate Log/Dispatch.pm in @INC

    记录一下配置mha的时候遇到的错误,使用perl模块发送邮件的时候报以下错误: # masterha_check_ssh --conf=/data/mha/app1.cnf Can't locate ...

  5. atexit函数详解

    对C语言有所了解的人都知道main函数是整个程序的入口,但是其实不然,在内核中可以使用链接器来设置程序的开始地方.当内核使⽤⼀个exec函数执⾏C程序时,在调⽤main函数之前先调⽤⼀个特殊的启动例程 ...

  6. 快速沃尔什变换(FWT)学习笔记 + 洛谷P4717 [模板]

    FWT求解的是一类问题:\( a[i] = \sum\limits_{j\bigoplus k=i}^{} b[j]*c[k] \) 其中,\( \bigoplus \) 可以是 or,and,xor ...

  7. Android开发者的四大工具

    1. Basic4Android Basic4Android是Android平台上一个简单而又强大的可视化快速应用开发工具,它可被用来开发和测试数据库通信,甚至可以被用来开发2D的即时游戏! 主要特性 ...

  8. Object.prototype.toString.call(obj)检测数据类型

    typeof bar=='object' 不能确切判断数据是一个‘纯粹’的对象 Array null的结果都是object 比较好的方法是: Object.prototype.toString.cal ...

  9. PHP中正则表达式学习及应用（二）

    正则表达式中的“元字符” * 匹配前一个内容的0次1次或多次 例如: <?php $mode="/go*gle/"; //前一个内容指的是 * 的前一个字符 o ,在$str ...

  10. Lightoj1080 【线段树】

    题意: 给你一个0/1的数组,然后给你n段区间,说这个区间里要反转一次,然后给你Q个询问,问你这个位置是什么: 思路: 我们线段树维护一下就好了额: 其实反转的话,还是算次数是不是,奇偶嘛: #inc ...