此方法需要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. 简单数位DP

    https://cn.vjudge.net/problem/HDU-4722 懒得写看,代码注释吧;主要存板子 #include <cstdio> #include <cstring ...

  2. hdu-2647 Reward && hdu-2049产生冠军 &&hdu-3342Legal or Not(拓扑排序)

    题目链接: hdu-2647 /*Problem : 2647 ( Reward ) Judge Status : Accepted RunId : 16919085 Language : G++ A ...

  3. C语言中文件操作

    用两个指针变量来操作字符串. 多维数组在做函数参数的时候,会退化成为一个指针变量,变成一个指向一维数组的数组指针,注意,是一个指针变量. 一维数组在当作函数参数传递的时候,会退化成为一个对应类型的指针 ...

  4. Service的两种启动方式

    今天又写Service,提示覆写onBind(),想起Android好像是有个叫做Binder的IPC机制. Service里面有一个onBind(),一个onStartCommand(),两者都能启 ...

  5. 洛谷 - P3033 - 牛的障碍Cow Steeplechase - 二分图最大独立集

    https://www.luogu.org/fe/problem/P3033 二分图最大独立集 注意输入的时候控制x1,y1,x2,y2的相对大小. #include<bits/stdc++.h ...

  6. HDU4801【DFS】

    参考:大牛博客 题意:  给你一个2阶魔方,给你24个数代表颜色,然后让你求在<=n次操作里面最多能搞出几面是一样的. 思路: 就是一个DFS嘛,就是怎么转搞出来: 上面: 22 23 4 0 ...

  7. hdu5861【线段树】

    题意: 有n个点,每个两两之间有一条路,给出每条路开放的花费,每条路只能打开关闭一次,然后m天里给出一个区间代表这条路必须在该天开放,求每天需要的花费. 思路: 这是一题纯粹用线段树搞的题. 我们可以 ...

  8. perl C/C++ 扩展（一）

    通过h2xs 中间件,我们可以快速的使用c或则C++ 库来实现perl 扩展功能 第一讲:跑通hello world 程序******************************我们使用命令:h2 ...

  9. perl C/C++ 扩展（二）

    第二讲perl 加载c/c++的库 先通过h2xs 创建一个新的工程 h2xs -A -n two_test 进入目录 cd two_test 创建一个mylib文件夹,存放静态库 mkdir myl ...

  10. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...