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

必须先赞下国人 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);

Yet another image library writen in pure JS:https://www.npmjs.com/package/jimp

时间： 2024-08-27 09:30:47

用 node-images 打造简易图片服务器的相关文章

Python中使用Flask、MongoDB搭建简易图片服务器

1.前期准备 通过 pip 或 easy_install 安装了 pymongo 之后, 就能通过 Python 调教 mongodb 了.接着安装个 flask 用来当 web 服务器. 当然 mongo 也是得安装的. 对于 Ubuntu 用户, 特别是使用 Server 12.04 的同学, 安装最新版要略费些周折, 具体说是 ? 1 2 3 4 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB

自己动手打造ajax图片上传

今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /&g

Node学习HTTP模块(HTTP 服务器与客户端)

Node学习HTTP模块(HTTP 服务器与客户端) Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端.http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由JavaScript封装,兼顾了高性能与简易性.http.request 则是一个HTTP 客户端工具,用于向 HTTP 服务器发起请求. 'http'模块提供两种使用方式: 作为服务端使用时,创建一个HTTP服务

spring.net +dapper 打造简易的DataAccess 工具类.

1 public class DBUtil 2 { 3 /// <summary> 4 /// 数据库连接字符串 5 /// </summary> 6 private static string DataBase_Connection = System.Configuration.ConfigurationManager.ConnectionStrings["DNT"].ToString(); 7 8 /// <summary> 9 /// 脚本文件

理解tomcat之搭建简易http服务器

做过java web的同学都对tomcat非常熟悉.我们在使用tomcat带来的便利的同时,是否想过tomcat是如何工作的呢?tomcat本质是一个http服务器,本篇文章将搭建一个简单的http服务器. 1 Catalina模型 首先我们先了解一下tomcat的大致工作原理.tomcat的核心是servlet容器,我们称它为Catalina(为什么叫这个名字?我也不知道￣へ￣).模型图如1.1 图1.1 Connector是用来"连接"容器里边的请求的.它的工作是为接收到每一个 H

（转）Nginx图片服务器

本文转至博客http://wenxin2009.iteye.com/blog/2117079 Nginx搭建图片服务器 Nginx下载地址:http://nginx.org/en/download.html 本例下载的是window版本nginx-1.6.1 以下是我本机操作说明: 下载完后,解压,并把它放到D:\tools\nginx-1.6.1,双击nginx.exe即可运行nginx.可通http://127.0.0.1访问到nginx欢迎界面,如下  也可在cmd中通过命令进行启停启动n

大型网站图片服务器架构的演进（转）

在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规划不足,造成后期架构上很难兼容和扩展). 本文将以一个真实垂直门户网站的发展历程,向大家娓娓道来. 构建在Windows平台之上的网站,往往会被业内众多技术认为很“保守”,甚至会有点.很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成的(当然,主要还是人的问题).由于长期缺乏开源支持,所

大型网站图片服务器架构的演进

在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规划不足,造成后期架构上很难兼容和扩展). 本文将以一个真实垂直门户网站的发展历程,向大家娓娓道来. 构建在Windows平台之上的网站,往往会被业内众多技术认为很“保守”,甚至会有点.很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成的(当然,主要还是人的问题).由于长期缺乏开源支持,所

Android笔记二十七.Bitmap之简易图片查看器

转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空) 为了增强用户之间的交互,Android系统中提供了一些API和部件给我们开发美观有趣的应用.比如Android系统提供了ImageView来显示静态图片.AnimationDrawble来开发逐帧动画以及通过Animation对普通图片使用不减动画等.另外,Android应用中的图片不仅包括*.png.*.jpg.*.gif等格式的位图,也包括使用XML资源文件定义的各种Drawable对象.关