1. 程式人生 > >用 node-images 打造簡易圖片伺服器(更新)

用 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(https://github.com/zhangyuanwei/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);