Node生成随机验证码图片
发布于 3 年前 作者 muyoucun557 3871 次浏览 来自 分享

前几天看到网上有人写了一个用Node生成随机验证码图片的程序,于是自己也想写一个这样的程序。遂动手了。

实现过程

1.按照bmp图片的数据结构,往Buffer对象里写数据,构建一个bmp图片。 2.将Buffer发送给浏览器。

具体的怎么实现不做说明,只说一下在coding的过程中遇到的一些问题。

1.选择生成图片的类型 选择生成24位的bmp图片。选择24位的图片,可以不用调色板这一块数据。

2.怎么计算某个点(x,y)的偏移量 bmp图片的前54字节数据(文件头数据+位图文件头数据)是不变的。24位的bmp图片时没有调色板的,3个字节的数据决定一个像素的颜色。 bmp图像有正向和反向之分,由bmp的高决定(高在位图文件头中),高是正值时,图片时反向的,高是负值时,图片时正向的。下面给出示意图 正反向图片.png 在计算偏移量时,计算方法不同。正向:offset = 54 + x +3*y*w (这个w是宽度取整后的值) 反向:offset = 54 + x + (h-y-1)*w

3.怎么给坐标点添加相应的颜色 先介绍一下大小端存储。小端存储:数据的高位存储在内存的高位,数据的低位存储在内存的低位;大端存储:数据的低位存储在内存的高位,数据的高位存储在内存的低位。 BMP图片是小端存储。因此在将颜色值(RGB)写入到Buffer对象中时应采用小端存储写入方式(Buffer提供了响应的方法)。

4.画直线的算法 1.根据起点坐标和终点坐标,计算直线的表达式,y = kx + b。 2.遍历x,计算出y,然后取距离最近的整数Y,得到点(x,Y),再对该坐标点添加颜色。

5.画圆的算法 1.根据圆心坐标和半径,计算圆的表达式,y = (+/-)Math.sqrt(r^2 - (x-a)^2) +b。 2.遍历x,求得y的值,然后取离y最近的整数Y,得到(x,Y),再对该坐标点添加相应的颜色。

6.ajax接收图片数据后怎么将其显示在浏览器中 给程序添加了“点击之后,立马刷新验证码”的功能。于是立马想到赢jQ来解决,代码如下

$.ajax({
    type:"GET",
    url:"/virCode",
    success: function (data) {
        $("img").attr("src",data);
    }
}); 
发现图片不能显示,首先想到的是编码问题,于是一查jQ官网,发现jQ仅支持字符串(responseText)和XML(responseXML)搞不懂jQ这样的框架为毛不支持二进制数据。于是只能用原生XMLHttpRequest。代码如下:
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET","/virCode",true);   
xhr.send(null);
xhr.onreadystatechange = function () {
    if( this.readyState == 4 ){
        var data = xhr.response;    //二进制流数据从xhr.response这里获取
        var url = window.URL.createObjectURL(data);     //生成一个指向验证码图片的URL
        $("img").attr("src",url);
        $("img").onload = function () {
            window.URL.revokeObjectURL(this.src); // 清除释放
        };
    }
}。

代码下载地址 bmp的数据结构这一块废了不少脑细胞 参考了网上不少资料,就不一一贴了

6 回复

建议把代码放到github上,一目了然,写得好还有star,百度网盘…尼揍凯~

放百度网盘是什么鬼ɿ(。・ɜ・)ɾⓌⓗⓐⓣ? From Noder

@DevinXian gitHub还不会弄

已经弄好了,放在github上了https://github.com/muyoucun557/BMP24

可以的 自豪地采用 CNodeJS ionic

回到顶部