此方法需要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. 使用openssl的aes各种加密算法

    #include <stdio.h> #include <string.h> #include <sys/types.h> #include <sys/sta ...

  2. （转）使用cygwin注意事项一

    原文出处:http://gotgit.readthedocs.io/en/latest/01-meet-git/050-install-on-windows-cygwin.html 在Windows下 ...

  3. CodeForces526F：Pudding Monsters （分治）

    In this problem you will meet the simplified model of game Pudding Monsters. An important process in ...

  4. PYTHON 异常处理 二 TRY 模块

    异常处理 捕捉异常可以使用try/except语句. try/except语句用来检测try语句块中的错误,从而让except语句捕获异常信息并处理. 如果你不想在异常发生时结束你的程序,只需在try ...

  5. Ubuntu 安装indicator-sysmonitor

    之前就像安装一个软件用来查看Ubuntu的CPU, 内存, 网速情况, 终于让我碰到了--indicator-sysmonitor 仅需三条命令, 你值得拥有: sudo add-apt-reposi ...

  6. twincat3新建cpp提示"在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "stdafx.h"

    自己之前在windows下面写过一些c++的函数,想在倍福工控机上直接使用,发现添加了.cpp和.h文件后无法完成编译,会提示 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#includ ...

  7. Win10资源管理器中的库文件夹按照修改日期排序

    win7之后添加的库十分的好用,可以将下载,音乐,文档设置在我的电脑(win10叫此电脑)首页,快速进入. 我对文件夹设置了按照时间排序,这样进去就可以直接看到最近下载了什么文件.但是win10用时间 ...

  8. 面试6-----11 const和静态变量那些事儿

    6 看看const和指针的那些事儿 const在int*左边 const在int*右边 const在int*两边------>请看代码注释 (1)代码 #include <stdio.h& ...

  9. RXJS组件间超越父子关系的相互通信

    RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...

  10. BlocksKit的使用

    一.引言 众所周知Block已被广泛用于iOS编程.它们通常被用作可并发执行的逻辑单元的封装,或者作为事件触发的回调.Block比传统回调函数有2点优势: 允许在调用点上下文书写执行逻辑,不用分离函数 ...