node.js WEB开发中图片验证码的实现方法

用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码。

先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载、处理、显示、保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿色环保,带到哪里都可以进行编译使用,不用安装一大推依赖。于是我就想利用这个CImg图形库做一个简单的demo,就从实现验证码这个功能入手,当然可以完全利用这个库来做裁剪图片等其他功能。

ccap模块是基于CImg图形库的封装,让它可以供node使用,由于CImg图形库的便携性,所以ccap模块可以完全不依赖其他任何第三方图形库或者软件而独立工作,也就说如果只是想要生成简单的验证码,只要require这个ccap模块即可。

1、安装:
通用方法:npm install ccap
或者通过github下载,地址:https://github.com/DoubleSpout/ccap
注:安装过程可能会出现错误,请根据错误提示安装相应依赖包

2、性能:

在2cpu的linux 64位服务器上生成验证码速度可以达到1200次/秒,测试生成的图片是BMP的,jpeg的图片验证码生成速度大约在600次/秒

3、声明方法:


代码如下:

var ccap = require('ccap');

var captcha1 = ccap();

var captcha2 = ccap(width, height, offset);

var captcha3 = ccap({

width:256,//set width,default is 256

可以通过上述代码实例化一个ccap类。 1、不传任何参数,全部使用默认的参数进行生成验证码 2、只传递宽,高,偏移进行实例化,调整图片的大小,和图片中文字的间隔 3、传递一个对象,除了宽,高和偏移,还传递了图片质量以及生成随机数的方法,ccap模块会根据自定义函数return的字符串作为图片验证码的内容,默认是0-9,A-Z的6位随即字符串。

理论上可以生产很多不同的ccap的实例,而且他们之间互相没有影响,所以即使是通过cluster开启多进程的node同时生产验证码也不存在互相锁止的影响。

对于图片质量只对jpeg图片有效,如果没有安装任何jpeg的lib库的话,只能使用bmp未压缩图形了,体积比较大,但是生成速度比较快。

4、使用方法,get():


代码如下:

height:60,//set height,default is 60

offset:40,//set text spacing,default is 40

quality:100,//set pic quality,default is 50

generate:function(){//Custom the function to generate captcha text

//generate captcha text here

return text;//return the captcha text

}

});

实例化ccap类之后,会得到captcha对象,这个对象只有一个对外方法,get(),这个方法每次调用都会返回验证码buffer和对应的text字符串内容,保存在数组里,类似这样的结构:


代码如下:

["captcha text","picture buffer"]

5、一个简单的web例子:


代码如下:

var http = require('http');

var ccap = require('ccap')();//Instantiated ccap class

http.createServer(function (request, response) {

if(request.url == '/favicon.ico')return response.end('');//Intercept request favicon.ico

var ary = ccap.get();

var txt = ary[0];

var buf = ary[1];

response.end(buf);

console.log(txt);

}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

注:有些代码参数可根据自己的环境自行修改

(0)

相关推荐

  • js插件实现图片滑动验证码

    图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的坐标. 先上代码吧,做个备份记录 jquery.lgymove.js /** * Created by lgy on 2017/10/21. * 图片验证码 */ (function ($) { $.fn.imgcode = function (options) { //初始化参数 var defaults = { callback:"" //回调函数 }

  • Jsp生成页面验证码的方法[附代码]

    image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下:  复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran

  • JavaScript 验证码的实例代码(附效果图)

    效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">    <title></title>    <style type="text/css">    .code    {            background:url(code_bg.jpg);            f

  • js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • js生成验证码并直接在前端判断

    js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function cr

  • JS制作图形验证码实现代码

    第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一) 弹框的样式如图二所示: (图二) 我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示: (图三) 如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示: (图四) 路由层描述 /** 供货商店铺-店铺简介 */ //1-在路由层进行设置,页面跳转到根目录下/buyer/vshop/info.ejs

  • JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

  • js实现发送验证码后的倒计时功能

    之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=

  • js实现简单的验证码

    验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆.验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助. 运行效果图: 代码如下: <html> <head> <title>js验证码</title> <style type="text/css"> .code { background:url(code_bg.jpg); font-family:Ar

  • js生成的验证码的实现与技术分析

    分享给大家一段js生成验证码并验证的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

随机推荐