详解用node-images 打造简易图片服务器

edit:2016-5-11 修正了代码里面一些明显的错误，并发布在 ajaxjs 库之中，源码在。

edit:2016-5-24 加入 head 请求，检测图片大小。如果小于 80kb 则无须压缩，返回 302 重定向。

node head 请求

var http = require('http'); 
var url = require('url'); 
var siteurl = url.parse('http://img1.gtimg.com/view/pics/hv1/42/80/2065/134297067.jpg'); 
 
request = http.request({ 
  method : 'head', 
  port: siteurl.port || 80, 
  host: siteurl.host, 
  path : siteurl.pathname 
}); 
request.on('response', function (response) { 
  response.setencoding('utf8'); 
  console.log(response.headers['content-length']); 
}); 
request.end(); 

必须先赞下国人 npm 库作品：node-images（），封装了跨平台的 c++ 逻辑，形成 nodejs api 让我们这些小白愉快地使用。之前用过 graphicsmagick for nodejs，功能最强大，但包体积也比较大，依赖度高，最近好像还爆出了漏洞事件。node-images 相比 gm，主要是更轻量级，无需安装任何图像处理库。

安装 node-images：

npm install images 

npm 包比较大，node_modules 里面有个 node-images.tar.gz 压缩包，下载完之后可以删掉，但剩余也有 11mb。

图片服务器，当前需求是：一个静态服务器，支持返回 jpg/png/gif 即可；支持 http 缓存；支持指定图片分辨率；支持远程图片加载。加载远程图片，可通过设置 maxlength 来限制图片文件大小。

实施过程中，使用 step.js 参与了异步操作，比较简单。

服务器的相关配置：

// 配置对象。 
var staticfileserver_config = { 
  'host': '127.0.0.1',      // 服务器地址 
  'port': 3000,        // 端口 
  'site_base': 'c:/project/bigfoot',   // 根目录，虚拟目录的根目录 
  'file_expiry_time': 480,    // 缓存期限 http cache expiry time, minutes 
  'directory_listing': true    // 是否打开 文件 列表 
}; 

请求例子：

http://localhost:3001/asset/coming_soon.jpg?w=300
http://localhost:3001/asset/coming_soon.jpg?h=150
http://localhost:3001/asset/coming_soon.jpg?w=300&h=150
http://localhost:3001/?url=http://s0.hao123img.com/res/img/logo/logonew.png

完整源码：

const 
  http = require('http'), path = require('path'), fs = require('fs'), crypto = require('crypto'), 
  url = require("url"), querystring = require("querystring"), 
  step = require('./step'), images = require("images"); 
 
// 配置对象。 
var staticfileserver_config = { 
  'host': '127.0.0.1',      // 服务器地址 
  'port': 3001,            // 端口 
  'site_base': 'c:/project/bigfoot',     // 根目录，虚拟目录的根目录 
  'file_expiry_time': 480,    // 缓存期限 http cache expiry time, minutes 
  'directory_listing': true    // 是否打开 文件 列表 
}; 
 
const server = http.createserver((req, res) => { 
  init(req, res, staticfileserver_config); 
}); 
 
server.listen(staticfileserver_config.port, staticfileserver_config.host, () => { 
  console.log(`image server running at http://${staticfileserver_config.host}:${staticfileserver_config.port}/`); 
}); 
 
// 当前支持的 文件类型，你可以不断扩充。 
var mime_types = { 
  '.txt': 'text/plain', 
  '.md': 'text/plain', 
  '': 'text/plain', 
  '.html': 'text/html', 
  '.css': 'text/css', 
  '.js': 'application/javascript', 
  '.json': 'application/json', 
  '.jpg': 'image/jpeg', 
  '.png': 'image/png', 
  '.gif': 'image/gif' 
}; 
 
mime_types['.htm'] = mime_types['.html']; 
 
var httpentity = { 
  contenttype: null, 
  data: null, 
  getheaders: function (expiry_time) { 
    // 返回 http meta 的 etag。可以了解 md5 加密方法 
    var hash = crypto.createhash('md5'); 
    //hash.update(this.data); 
    //var etag = hash.digest('hex'); 
 
    return { 
      'content-type': this.contenttype, 
      'content-length': this.data.length, 
      //'cache-control': 'max-age=' + expiry_time, 
      //'etag': etag 
    }; 
  } 
}; 
 
function init(request, response) { 
  var args = url.parse(request.url).query,     //arg => name=a&id=5  
    params = querystring.parse(args); 
 
  if (params.url) { 
    getremoteimg(request, response, params); 
  } else { 
    load_local_img(request, response, params); 
  } 
} 
 
// 加载远程图片 
function getremoteimg(request, response, params) { 
  var imgdata = ""; // 字符串 
  var size = 0; 
  var chunks = []; 
 
  step(function () { 
      http.get(params.url, this); 
    }, 
    function (res) { 
      var maxlength = 10; // 10mb 
      var imgdata = ""; 
      if (res.headers['content-length'] > maxlength * 1024 * 1024) { 
        server500(response, new error('image too large.')); 
      } else if (!~[200, 304].indexof(res.statuscode)) { 
        server500(response, new error('received an invalid status code.')); 
      } else if (!res.headers['content-type'].match(/image/)) { 
        server500(response, new error('not an image.')); 
      } else { 
        // res.setencoding("binary"); //一定要设置response的编码为binary否则会下载下来的图片打不开 
        res.on("data", function (chunk) { 
          // imgdata+=chunk; 
          size += chunk.length; 
          chunks.push(chunk); 
        }); 
 
        res.on("end", this); 
      } 
       
    }, 
    function () {  
      imgdata = buffer.concat(chunks, size); 
     
      var _httpentity = object.create(httpentity); 
      _httpentity.contenttype = mime_types['.png']; 
      _httpentity.data = imgdata; 
      // console.log('imgdata.length:::' + imgdata.length) 
      // 缓存过期时限 
      var expiry_time = (staticfileserver_config.file_expiry_time * 60).tostring(); 
      response.writehead(200); 
      response.end(_httpentity.data); 
    } 
  ); 
   
} 
 
 
// 获取本地图片 
function load_local_img(request, response, params) { 
  if (path.extname(request.url) === '') { 
    // connect.directory('c:/project/bigfoot')(request, response, function(){}); 
    // 如果 url 只是 目录 的，则列出目录 
    console.log('如果 url 只是 目录 的，则列出目录'); 
    server500(response, '如果 url 只是 目录 的，则列出目录@todo'); 
  } else { 
    var pathname = require('url').parse(request.url).pathname; 
    // 如果 url 是 目录 + 文件名 的，则返回那个文件 
    var path = staticfileserver_config.site_base + pathname; 
 
    step(function () { 
      console.log('请求 url :' + request.url + ', path : ' + pathname); 
      fs.exists(path, this); 
    }, function (path_exists, err) { 
      if (err) { 
        server500(response, '查找文件失败！'); 
        return; 
      } 
      if (path_exists) { 
        fs.readfile(path, this); 
      } else { 
        response.writehead(404, { 'content-type': 'text/plain;charset=utf-8' }); 
        response.end('找不到 ' + path + '\n'); 
      } 
    }, function (err, data) { 
      if (err) { 
        server500(response, '读取文件失败！'); 
        return; 
      } 
      var extname = '.' + path.split('.').pop(); 
      var extname = mime_types[extname] || 'text/plain'; 
 
      var _httpentity = object.create(httpentity); 
      _httpentity.contenttype = extname; 
      var budata = new buffer(data); 
      //images(budata).height(100); 
 
      var newimage; 
 
      if (params.w && params.h) { 
        newimage = images(budata).resize(number(params.w), number(params.h)).encode("jpg", { operation: 50 }); 
      } else if (params.w) { 
        newimage = images(budata).resize(number(params.w)).encode("jpg", { operation: 50 }); 
      } else if (params.h) { 
        newimage = images(budata).resize(null, number(params.h)).encode("jpg", { operation: 50 }); 
      } else { 
        newimage = budata; // 原图 
      } 
 
      _httpentity.data = newimage; 
 
      // 命中缓存，not modified返回 304 
      if (request.headers.hasownproperty('if-none-match') && request.headers['if-none-match'] === _httpentity.etag) { 
        response.writehead(304); 
        response.end(); 
      } else { 
        // 缓存过期时限 
        var expiry_time = (staticfileserver_config.file_expiry_time * 60).tostring(); 
 
        response.writehead(200, _httpentity.getheaders(expiry_time)); 
        response.end(_httpentity.data); 
      } 
    }); 
  } 
} 
function server500(response, msg) { 
  console.log(msg); 
  response.writehead(404, { 'content-type': 'text/plain;charset=utf-8' }); 
  response.end(msg + '\n'); 
} 
加水印也是可以的。例子如下。
var images = require('images'); 
var path = require('path'); 
var watermarkimg = images(path.join(__dirname, 'path/to/watermark.ext')); 
var sourceimg = images(path.join(__dirname, 'path/to/sourceimg.ext')); 
var savepath = path.join(__dirname, 'path/to/saveimg.jpg'); 
 
// 比如放置在右下角，先获取原图的尺寸和水印图片尺寸 
var swidth = sourceimg.width(); 
var sheight = sourceimg.height(); 
var wmwidth = watermarkimg.width(); 
var wmwidth = watermarkimg.height(); 
 
images(sourceimg) 
 // 设置绘制的坐标位置，右下角距离 10px 
 .draw(watermarkimg, swidth - wmwidth - 10, sheight - wmheight - 10) 
 // 保存格式会自动识别 
 .save(savepath); 

  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。