詳解用node-images 打造簡易圖片服務器
更新時間：2017年05月08日 09:56:50 作者：sp42a
本篇文章主要介紹了詳解用node-images 打造簡易圖片服務器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Edit:2016-5-11 修正了代碼里面一些明顯的錯誤，并發(fā)布在 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。
圖片服務器，當前需求是：一個靜態(tài)服務器，支持返回 jpg/png/gif 即可；支持 HTTP 緩存；支持指定圖片分辨率；支持遠程圖片加載。加載遠程圖片，可通過設(shè)置 maxLength 來限制圖片文件大小。
實施過程中，使用 Step.js 參與了異步操作，比較簡單。
服務器的相關(guān)配置：
// 配置對象。
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"); //一定要設(shè)置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)
// 設(shè)置繪制的坐標位置，右下角距離 10px
.draw(watermarkImg, sWidth - wmWidth - 10, sHeight - wmHeight - 10)
// 保存格式會自動識別
.save(savePath);
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
node 使用multer中間件上傳報錯Unexpected end of fo
再前幾天還是可以正常上傳,但今天運行出現(xiàn)該報錯,下面通過場景分析給大家介紹node使用multer中間件上傳,報錯Unexpected end of form的解決方案,感興趣的朋友一起看看吧2025-03-03
這篇文章主要為大家介紹了Koa2路由及koa腳手架的使用入門詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了使用npm發(fā)布Node.JS程序包教程,本文講解了配置package.json、注冊npm帳號、發(fā)布程序包等內(nèi)容,需要的朋友可以參考下2015-03-03
Nodejs 中的 Buffer 類的創(chuàng)建與基本使用
這篇文章主要為大家介紹了Nodejs中Buffer的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了使用Express處理請求和托管靜態(tài)資源方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
node+express+ejs使用模版引擎做的一個示例demo
本篇文章主要介紹了node+express+ejs使用模版引擎做的一個示例demo，具有一定參考價值，有興趣的小伙伴可以了解一下2017-09-09
這篇文章主要給大家介紹了利用node.js寫一個爬取知乎妹紙圖的小爬蟲，文中給出了詳細的示例代碼和介紹，對大家具有一定的參考學習價值，需要的朋友可以參考學習，下面來一起看看吧。2017-05-05
本篇文章主要介紹了node.js爬蟲爬取拉勾網(wǎng)職位信息的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了如何利用Node.js做簡單的圖片爬取，爬蟲的主要目的是收集互聯(lián)網(wǎng)上公開的一些特定數(shù)據(jù)，本文介紹用于網(wǎng)絡(luò)抓取的node.js包，完成一個簡單的爬蟲案例來爬取網(wǎng)頁上圖片并下載到本地2022-06-06
Node.js自定義對象事件的監(jiān)聽與發(fā)射
這篇文章介紹了Node.js自定義對象事件監(jiān)聽與發(fā)射的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07