ImageMagick图片服务器
1.前置准备工具如下:
- nodejs
- express(nodejs mvc框架)
- body-parser(express middleware)
- gm(nodejs中用来处理图片的)
- uuid(nodejs中用于生成uuid)
- underscore(nodejs数据处理库)
- ImageMagick(gm会调用该程序处理图片)
2.搭建项目
使用express来快速搭建项目,图片服务器的功能相对简单,步骤:1、获取图片资源 2、上传图片,因此对应express只需要使用到bodyParser这样的基本组件,代码大致如下:
//app.js
var app = require('express')();
process.app = app;//方便在其他地方使用app获取配置 require('./config')(__dirname, app);//所有配置
var mode = app.get('mode');
require('./controller/' + mode + 'Controller.js'); var config = app.get(mode);
require('http').createServer(app).listen(config.port, function () {
console.log('%s已经启动,正监听:%s', config.name, config.port);
}); //config.js
var path = require('path'); var OPTIONS = {
targetDir: function (app) {
return path.join(app.get('rootDir'), 'img');
},
read: {
name: '<<图片服务器(读取)>>',
port: 80,
'default': 'default.jpg',
sizeReg: /(\w+)-(\d+)-(\d+)\.(\w+)$/
},
save: {
name: '<<图片服务器(保存)>>',
port: 9990
},
mode: 'read',
contentType: {
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'gif': 'image/gif',
'png': 'image/png'
}
}; module.exports = function (rootDir, app) {
app.set('rootDir', rootDir); var $ = require('underscore');
$.each(OPTIONS, function (v, k) {
app.set(k, typeof v === 'function' ? v(app) : v);
}); app.use(require('body-parser')())
};
3.获取图片
用户根据url获取图片服务器内存储的图片,当后台接收这个请求后,首先判断图片上会否存在,如果存在则返回对应的图片否则返回默认的图片,大致代码如下:
var path = require('path');
var fs = require('fs');
var gm = require('gm').subClass({ imageMagick: true });//默认的情况下 gm使用的是另外一个图片处理程序 var app = process.app;
var config = app.get('read');
var targetDir = app.get('targetDir'); app.get('/:filename', function (req, res) {
var filePath = path.join(targetDir, req.params.filename);
fs.exists(filePath, function (exists) {
res.sendfile(exists ? filePath : path.join(targetDir, config.default));
});
});
使用以上的代码便可以对图片进行读取了,但是只能对targetDir目录下的文件进行读取且没有对文件类型进行判断,对文件类型的判断比较简单只要在方法执行之前对文件扩展名进行判断即可,至于增加了文件夹结构的话,跟直接从targetDir目录下读取是差不多的流程,稍微调整一下代码:
var contentTypes = app.get('contentType'); app.get('/:filename', function (req, res) {
sendFile([], req.params.filename, res);
}); app.get('/:folder/:filename', function (req, res) {
sendFile([req.params.folder], req.params.filename, res);
}); app.get('/:folder1/:folder2/:name', function (req, res) {
sendFile([req.params.folder1, req.params.folder2], req.params.filename, res);
}); function sendFile(folders, filename, res) {
var ext = path.extname(filename).substr(1);
if (!contentTypes[ext])
return res.sendfile(getFilePath()); folders.push(filename);
var filePath = getFilePath(path.join.apply(path, folders));
fs.exists(filePath, function (exists) {
res.sendfile(exists ? filePath : getFilePath());
});
} function getFilePath(filename) {
return path.join(app.get('targetDir'), filename || config.default);
}
接下来假设一个场景,如果上传了一张800*600的图片,但是在页面上显示的时候,也许我只想显示一张200*150的缩略图,这时候gm就该登场了,我们可以使用gm来为800*600的图片临时生成一张200*150的图片,并以buffer的形式回传给客户端,大致代码如下:
//判断请求图片是否存在
if (exists)
return res.sendfile(filePath); var groups = filename.match(config.sizeReg);
if (!groups)
return res.sendfile(getFilePath()); folders[len] = groups[1] + "." + groups[4];
filePath = getFilePath(path.join.apply(path, folders));
var width = parseInt(groups[2]);
var height = parseInt(groups[3]);
//判断原始图是否存在
fs.exists(filePath, function (exists) {
if (!exists)
filePath = getFilePath(); var gm = gm(filePath);
if (width > 0 && height > 0)
gm.resize(width, height);
gm.toBuffer(function (err, buffer) {
if (err)
return res.sendfile(getFilePath()); res.set('Content-Type', contentTypes[ext]);
res.send(buffer);
});
});
4.上传图片
由于图片服务器只提供最简单的功能,支持文件上传(制作水印以及其他的处理在下一篇中讲述),也不会将此功能开放到外网,因此图片上传服务器是在内网的,只能从web服务器那边处理图片以后上传到图片服务器,图片服务器对其进行存储并返回存储后的图片路径,大致代码如下:
var buf = require('buffer');
var fs = require('fs');
var path = require('path');
var util = require('util');
var gm = require('gm').subClass({ imageMagick: true });
var uuid = require('uuid'); var app = process.app;
var contentTypes = app.get('contentType'); /*
请求包含如下参数:
@ext 图片扩展名
@buffer 图片buffer数据
@folder 文件夹,格式:/aa/bb
*/
app.post('/', function (req, res) {
var ext = req.body.ext;
var buffer = req.body.buffer;
if (!(ext && buffer && contentTypes[ext]))
return res.json({ success: false }); var pathArgs = req.body.folder.replace(/\n/g, '');
if (pathArgs)
pathArgs = pathArgs.substr(1).split('/');
else
pathArgs = ['']; createDir(pathArgs); pathArgs.push('');
var filePath = createPath(pathArgs, ext);
gm(new buf.Buffer(JSON.parse(buffer))).write(filePath, function (err) {
if (err)
return res.json({ success: false }); res.json({ success: true, data: util.format('\\%s.%s', pathArgs.join('\\'), ext) });
});
}); function createDir(pathArgs) {
if (pathArgs[0]) {
var dir = path.join(app.get('targetDir'), path.join.apply(path, pathArgs));
var exists = fs.existsSync(dir);
if (!exists)
fs.mkdirSync(dir);
}
} function createPath(pathArgs, ext) {
var args = [app.get('targetDir')];
pathArgs[pathArgs.length - 1] = uuid.v1().replace(/-/g, '');
args.push.apply(args, pathArgs);
var filePath = path.join.apply(path, args) + '.' + ext;
return fs.existsSync(filePath) ? createPath(pathArgs, ext) : filePath;
}
ImageMagick图片服务器的更多相关文章
- 高性能图片服务器–ZIMG
2011年李彦宏在百度联盟峰会上就提到过互联网的读图时代已经到来1,图片服务早已成为一个互联网应用中占比很大的部分,对图片的处理能力也相应地变成企业和开发者的一项基本技能.需要处理海量图片的典型应用有 ...
- 使用nodejs搭建图片服务器(一)
背景 当我们开发一个Web项目的时候,为了将图片管理与web服务分离开,通常都会搭建一个图片服务器. 之所以选择nodejs是因为使用nodejs来搭建web项目相当简单而且快速,虽然这个图片服务器很 ...
- Windows下搭建Nginx图片服务器
在项目最开始,上传图片的时候,服务器先保存原图再使用ImageMagick生成上传图片缩略图,这种方法有很多缺点,例如生成的缩略图的大小是固定的,不能动态请求指定大小的缩略图. 虽然有非常多的图片云存 ...
- 高性能图片服务器–ZIMG(转)
2011年李彦宏在百度联盟峰会上就提到过互联网的读图时代已经到来1,图片服务早已成为一个互联网应用中占比很大的部分,对图片的处理能力也相应地变成企业和开发者的一项基本技能.需要处理海量图片的典型应用有 ...
- centos6.5 nginx-1.8.0和ftp搭建图片服务器
一.Nginx的安装步骤 1.Nginx安装环境: gcc: 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc:yum install gcc-c+ ...
- 011商城项目:图片服务器的安装---nginx
这个是电商的项目,不是传统项目,所以给图片单独架一台服务器. 我们看上图: 用户上传图片时上传到Tomcat1或者Tomcat2.然后Tomcat1和Tomcat2通过FTP服务把图片上传到图片服务器 ...
- 配置nginx的图片服务器
user nginx; worker_processes 8; error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; pid ...
- win7使用iis并搭建 图片服务器
1.打开控制面板 2.程序-卸载程序 3.点击左边的 打开或关闭windows功能 4.如下图所示,找到internet信息服务勾选.顺便把FTP服务器也全部勾选了,后面会用到 5.进入 控制面板 – ...
- nginx 一二事(1) - 简单图片服务器解决方案
最近经常有人问图片上传怎么做,有哪些方案做比较好,也看到过有关于上传图片的做法,但是都不是最好的 今天再这里简单讲一下上传图片以及图片服务器的大致理念 如果是个人项目或者企业小项目,仅仅只有十来号人使 ...
随机推荐
- webpack2使用ch8-loader解析less less自动添加浏览器前缀
1 目录结构 安装依赖 "less": "^2.7.2","less-loader": "^4.0.3", 2 web ...
- oracle基本查询语句总结
spool E:\基本查询.txt 将命令行的语句写入到指定的目下的指定的文件中 host cls 清屏命令 show user 显示当前操作的用户 desc emp 查看表结构 select * f ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- Java基础语法(下篇)
Java基础语法(下篇) 内容概要: (1)函数的定义 (2)函数的特点 (3)函数的应用 (4)函数的重载 ...
- adb获取Android性能数据
环境:Android测试环境 搭建Android测试环境: 1.下载AndroidSDK: 2.配置环境变量: (1).ANDROID_HOME (2).ANDROID_HOME-TOOLS (3). ...
- java中==与equel的区别
值类型是存储在内存中的堆栈(以后简称栈),而引用类型的变量在栈中仅仅是存储引用类型变量的地址,而其本身则存储在堆中. ==操作比较的是两个变量的值是否相等,对于引用型变量表示的是两个变量在堆中存储的地 ...
- 深入浅出 SpringMVC - 1
前言: 本篇笔记是LZ在之前学习 SpringMVC 框架时所的记录,分两篇分享,此篇为基础篇,包括 SpringMVC 环境在 Eclipse 中的搭建,SpringMVC 的 HelloWorld ...
- win10 uwp 打开文件管理器选择文件
本文:让文件管理器选择文件,不是从文件管理器获得文件. 假如已经获得一些文件,那么如何从文件管理器选择这些文件? 使用方法很简单. 从网上拿图来说 打开文件夹自动选择所有文件 首先需要获得文件夹,因为 ...
- PHP知识大全
--------------------------------------------------------- PHP知识大全 ---------------------------------- ...
- 读Zepto源码之Form模块
Form 模块处理的是表单提交.表单提交包含两部分,一部分是格式化表单数据,另一部分是触发 submit 事件,提交表单. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...