此方法需要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. html5--4-5 embed元素及其他

    html5--4-5 embed元素及其他 学习要点 掌握embed元素的使用 了解object元素的使用 温馨提示:关于video和audio的事件方法等涉及都JavaScript知识的内容,暂时不 ...

  2. mongodb给我们提供了fsync+lock机制把数据暴力的刷到硬盘上

    能不能把数据暴力的刷到硬盘上,当然是可以的,mongodb给我们提供了fsync+lock机制就能满足我们提的需求. fsync+lock首先会把缓冲区数据暴力刷入硬盘,然后给数据库一个写入锁,其他实 ...

  3. 关于“C++语言程序设计”书的一个类

    class book{    char* title;    int num_pages;    int cur_page;public:    book(const char* theTitle, ...

  4. <VS>MFC程序显示命令行窗口

    编写MFC程序时,想打印出调试信息,使用cout后,发现程序并没有像想象中那样自动弹出命令行窗口,要输出的信息也没地方去查看.百度后知道要手动调出命令行窗口,才可以看到输出的信息.   百度上介绍了两 ...

  5. C++之友元机制（友元函数和友元类）

    一.为什么引入友元机制? 总的来说就是为了让非成员函数即普通函数或其他类可以访问类的私有成员,这确实破坏了类的封装性和数据的隐蔽性,但为什么要这么做呢? (c++ primer:尽管友元被授予从外部访 ...

  6. JNI——C调用JAVA

    步骤: 1. 创建虚拟机 2. 获得class 3. 实例化对象:获得构造方法(方法名为“<init>”),构造参数,调用方法 4. 调用方法:又分为获得方法,构造方法,调用方法 操作方法 ...

  7. PHP 单引号与双引号的区别 SQL中的使用

    php单引号与双引号用法:引号嵌套方法 1.双引号内不能直接就再嵌套双引号 2.双引号与单引号互相嵌套使用 如: 双引号内直接嵌套单引号 echo "<script language= ...

  8. SSL卸载技术对于HTTPS应用的优化与思考

    迅猛发展的互联网为我们提供了丰富的信息资源,在带来便利的同时也影响着人们工作和生活方式.而让我们无法忽视的是,在开放的互联网所带来的繁荣背后,同时也潜藏着安全方面的隐患.随着人们对网络的依赖愈渐加深, ...

  9. 八、MyEclipse多次重装、删除注册表、重装系统激活都不成功，终极解决方法 - imsoft.cnblogs

    MyEclipse(2010,2014)激活不成功的结论: [问题原因]激活不成功时,主要是激活的密钥文件.myeclipse.properties不在指定的位置.(一般都在D.E.F.G等盘符根目录 ...

  10. linux进程状态D和Z的处理

    长期生活在 Linux 环境里,渐渐地就有一种环保意识油然而生.比如,我们会在登录提示里写上"悟空,我跟你说过叫你不要乱扔东西,乱扔东西是不对的.哎呀我话没说完你怎么把 棍子扔掉了?月光宝盒 ...