热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

用nodeimages打造简易图片服务器

必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP

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

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


推荐阅读
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
author-avatar
遗忘不能忘
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有