ホームページ > 記事 > ウェブフロントエンド > ノードイメージを使用してイメージサーバー機能を実装するサンプルコードを共有する
この記事では、node-images を使用して簡単な image サーバーを作成する方法を主に詳しく紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう
編集: 2016-5-11 コード内のいくつかの明らかなエラーを修正し、ajaxjs ライブラリで公開しました。ソース コードはここにあります。
編集: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 (github.com/zhangyuanwei/node-images) を気に入ってください。これは、クロスプラットフォーム C++ ロジックをカプセル化し、初心者向けの nodejs API を形成します。使って満足です。以前、nodejs には GraphicsMagick を使用したことがありますが、これが最も強力ですが、パッケージのサイズが比較的大きく、依存性が高いため、最近脆弱性が報告されているようです。 GM と比較すると、node-image は主に軽量であり、画像処理ライブラリのインストールを必要としません。
node-images をインストールします:
npm install images
npm パッケージは比較的大きいです。node_modules には、node-images.tar.gz 圧縮パッケージがあります。ダウンロード後に削除できますが、まだ 11mb 残っています。
画像サーバーの現在の要件は次のとおりです。jpg/png/gif を返すことをサポートする静的サーバー。指定された画像解像度をサポートします。リモート画像をロードするには、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 // 是否打开 文件 列表 };
リクエストの例:
localhost:3001/asset/coming_soon.jpg?w=300
localhost:3001/asset / coming_soon.jpg?w=300&h=150
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);
【関連する推奨事項】
1.
無料のjsオンラインビデオチュートリアルJavaScript中国語リファレンスマニュアルphp.cn - JavaScriptビデオチュートリアル以上がノードイメージを使用してイメージサーバー機能を実装するサンプルコードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。