此方法需要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. Loadrunner进行性能测试的步骤

    Loadrunner 11是一款免费的性能测试工具,他包含三个大模块 •使用VuGen:创建脚本•运用Controller:设置方案•查看Analysis:分析测试结果 结合软件测试的流程可以知道使用 ...

  2. Yii的缓存机制之数据缓存

    具体说法就是可以缓存变量信息. 设置:Yii::app()->cache->set(名字, 值, 过期时间): 使用:Yii::app()->cache->get(名字); 删 ...

  3. H3C-路由器密码恢复

    路由器密码恢复: 1.先关闭电源,重新启动路由器,注意终端上显示 press CTRL+B to enter extended boot menu 的时候,我们迅速按下ctrl+B,这样将进入扩展启动 ...

  4. (测试)LaTeX公式

    \[a^2+b^2=c^2\] \[F(\omega)=\mathcal{F}[f(t)]=\int_{-\infty}^\infty f(t)e^{-iwt}\,dt\] \[\sum_{i=0}^ ...

  5. salt api

    #!/usr/bin/env python # -*- coding:utf8 -*- # __author__ = '北方姆Q' import requests import json from d ...

  6. hibernate学习二 基本用法

    一  映射文件User.hbm.xml 定义了持久化类实例是如何存储和加载的,这个文件定义了持久化类和表的映射. 根据映射文件,Hibernate可以生成足够的信息以产生所有的SQL语句,也就是类的实 ...

  7. js 拦截 窗体关闭事件

    <script type="text/javascript">   <!--         window.onbeforeunload = onbeforeun ...

  8. ElasticSearch基础之批量操作(mget+mbulk)

      在前面的演示中,我们都是基于一次http查询,每次查询都要建立http的三次握手请求,这样比较耗费性能!因此ES给我们提供了基本的批量查询功能,例如如下的查询,注意里面的index是可以任意指明的 ...

  9. 前端HTML 与css 整理（未完）

    HTML 中的标签存放于文本文件中 需要按照以下固定的文档结构组织:<!DOCTYPE HTML><html> <head>头部相关信息 </head> ...

  10. E20190226-hm

    shallow  adj. 浅的,肤浅的; 表面的,皮毛的; (水,器物等) 浅的; (呼吸) 浅的;  n. 浅处; 浅滩;