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

实现过程

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

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

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

2.怎么计算某个点（x,y）的偏移量 bmp图片的前54字节数据（文件头数据+位图文件头数据）是不变的。24位的bmp图片时没有调色板的，3个字节的数据决定一个像素的颜色。 bmp图像有正向和反向之分，由bmp的高决定（高在位图文件头中），高是正值时，图片时反向的，高是负值时，图片时正向的。下面给出示意图 在计算偏移量时，计算方法不同。正向：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的数据结构这一块废了不少脑细胞 参考了网上不少资料，就不一一贴了