Node+UDP實(shí)現(xiàn)圖片裁剪功能的方法

這篇文章將為大家詳細(xì)講解有關(guān)Node+UDP實(shí)現(xiàn)圖片裁剪功能的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

UDP服務(wù)器可以用于一些特殊數(shù)據(jù)的（高效）傳輸，例如圖片、視頻和音頻信息等

我見過一些大佬用UDP來和C++ server交互，主要目的就是希望將PHP無(wú)法處理的邏輯業(yè)務(wù)，通過UDP服務(wù)器發(fā)送給其他server來處理。

所以，能不能有這樣一個(gè)需求：我們有兩個(gè)服務(wù)器A、B，我們希望A處理所有的業(yè)務(wù)邏輯，而B只去做數(shù)據(jù)庫(kù)操作（比如更新）。

有多個(gè)設(shè)計(jì)思想可以解決上面的問題，最簡(jiǎn)單的就是通過HTTP發(fā)送請(qǐng)求的方式，將A處理后的參數(shù)通過HTTP方式傳遞給B服務(wù)器，然后B服務(wù)器獲取參數(shù)后更新數(shù)據(jù)庫(kù)。 —— 這種方式對(duì)于Node.js 來說非常簡(jiǎn)單，但是HTTP是一個(gè)TCP協(xié)議，對(duì)于我們自己的兩臺(tái)可信賴的服務(wù)器，我們更希望使用UDP來傳送協(xié)議，避免TCP中不必要的數(shù)據(jù)傳輸。

接下來我們要介紹的一個(gè)應(yīng)用，就是使用Node.js來處理圖片上傳切割(圖片處理)，并通過客戶端顯示所有的經(jīng)過處理后的圖片列表，而這個(gè)功能也將應(yīng)用UDP模塊來實(shí)現(xiàn)。

應(yīng)用分析

本應(yīng)用包含兩個(gè)部分，一個(gè)是圖片上傳的Web服務(wù)功能模塊、圖片處理后的頁(yè)面展示功能；另外一個(gè)則是圖片的處理，主要是圖片的切割保存。而作為用戶，希望是這樣的一個(gè)工具，上傳一個(gè)圖片，并指定其需要切割的長(zhǎng)和寬，通過系統(tǒng)處理后返回給用戶一個(gè)切割好的圖片，并通過頁(yè)面返回展示。

根據(jù)以上的需求的分析，我們將上面的需求轉(zhuǎn)化為如圖4-5所示的系統(tǒng)運(yùn)行流程圖。根據(jù)應(yīng)用的分析，我們會(huì)設(shè)計(jì)兩個(gè)服務(wù)器，一一個(gè)是Web服務(wù)器，另外一個(gè)則是圖片處理服務(wù)器，兩者通過UDP協(xié)議進(jìn)行交互：

圖片上傳頁(yè)面，主要是圖片的上傳和預(yù)覽功能頁(yè)面;圖片展示頁(yè)面，展示通過圖片處理后返回的圖片; HTTP Web服務(wù)器主要的作用是文件上傳和圖片展示;圖片處理服務(wù)器，將Web服務(wù)器的數(shù)據(jù)通過UDP協(xié)議傳遞給圖片處理服務(wù)器，圖片處理服務(wù)器做-定的處理后返回相應(yīng)的數(shù)據(jù)到Web服務(wù)器。

UDP Server端實(shí)現(xiàn) —— 圖片處理服務(wù)器

根據(jù)上面的分析，本應(yīng)用需要實(shí)現(xiàn)的3個(gè)功能模塊分別是，UDP Server端、UDP Client端(Web Server) 和Jade頁(yè)面。
那么首先我們從該應(yīng)用的UDPServer端代碼實(shí)現(xiàn)原理開始介紹(也就是圖片處理服務(wù)器)。圖片處理服務(wù)器作為UDP的server端，要應(yīng)用UDP模塊實(shí)現(xiàn)UDP server, 由于該UDP server依賴圖片處理工具,因此在UDP服務(wù)程序中會(huì)應(yīng)用github中的一個(gè)開源Node.js圖片處理工具一node -imagemagick來輔助實(shí)現(xiàn)圖片處理功能。根據(jù)上面的分析，我們簡(jiǎn)單設(shè)計(jì)出UDP Server的代碼框架，代碼如下:

const dgram=require('dgram');   //UDPconst server=dgram.createSocket("udp4");server.on("message",function(msg,rinfo){
	//監(jiān)聽消息事件后處理})server.on("listening",function(){
	var address=server.address();
	console.log("server listening "+address.address+":"+address.port);})server.bind("監(jiān)聽端口號(hào)");

會(huì)發(fā)現(xiàn)，UDP其實(shí)似乎和socket.io差不多？都是采用的監(jiān)聽消息流機(jī)制。而http沒有這樣做，所以幾乎不用http去做這些高交互的事情 —— 這固然和他們的內(nèi)部實(shí)現(xiàn)有關(guān)。

監(jiān)聽完了，該干正事了：我們需要一個(gè)函數(shù)去處理圖片。這個(gè)函數(shù)的觸發(fā)時(shí)間要在事件流之后：

npm install imagemagick

需要注意的是，在使用該工具時(shí)，必須安裝imagemagick-cli系統(tǒng)工具軟件：sudo apt-get install imagemagick --fix-missing（否則會(huì)在運(yùn)行期間拋出異常）

/**
	url：圖片源路徑
	width：圖片壓縮寬
	height：圖片壓縮高
	newName：圖片處理后存儲(chǔ)路徑
**/function resizeImage(url,width,height,newName,callback){
	var im=require('imagemagick');
	im.resize({
		srcPath: url,
		dstPath: newName,
		width: width,
		height: height	}, function(err,stdout,stderr){
		if(err){
			callback(-1);
		}else{
			callback(stdout);
		}
	})}

然后在udp的onmessage回調(diào)函數(shù)中調(diào)用：

server.on("message",function(msg,rinfo){
	var imageObject=JSON.parse(msg);
	resizeImage(imageObject.url, imageObject.width, imageObject.height, imageObject.new_name, function(ret){
		var retJson;
		if(ret==-1){
			retJson={'code':-1,'msg':'some error in resize image','data':{}}
		}else{
			retJson={'code':0,'msg':'success','data':{'name':imageObject.new_name}}
		}
		//將json對(duì)象轉(zhuǎn)為json字符串
		var retStr=JSON.stringify(retJson);
		//轉(zhuǎn)為buffer對(duì)象，用于UDP傳輸
		var message=new Buffer(retStr);
		server.send(message,0,message.length,rinfo.port,rinfo.address);
	})})

server.on("message",callback(msg, rinfo))回調(diào)函數(shù)中有msg和rinfo參數(shù)，其中msg為客戶端發(fā)送的消息數(shù)據(jù)，而rinfo則為客戶端信息，服務(wù)器端根據(jù)客戶端信息中的端口port和IP地址address， 應(yīng)用server.send響應(yīng)數(shù)據(jù)到客戶端即可。到這里我們就實(shí)現(xiàn)了一個(gè)圖片處理的UDP服務(wù)器，接下來介紹Web服務(wù)器端是如何與其交互的。

UDP Client端 —— 前臺(tái)服務(wù)器

npm install express jade formidable body-parser

const jade=require('jade');const express=require('express');const bodyParser=require('body-parser');const fs=require('fs');const VIEW=__dirname+"/view/";var app=express();app.set('view engine','jade');app.use(bodyParser.urlencoded({extended: true}))app.get('/',function(req,res,next){
	//http響應(yīng)文件上傳頁(yè)面
	res.render(VIEW+'index.jade');};//文件上傳處理邏輯app.post('/upload',function(req,res,next){
	var now=Date.parse(new Date())/1000;
	var form=new formidable.IncomingForm(),
		fields=[],
		baseName=__dirname+'/uploadFile/'+now,
		imageName=baseName+'.png',   //源圖片路徑
		newName=baseName+'_small'+'.png',   //新文件路徑
		pathName='/uploadFile/'+now+'_small'+'.png';
	form.on('field',function(field,value){
		fields.push([field,value]);
	});
	form.parse(req,function(error,fields,files){
		var size=''+fields.width+'x'+fields.height
		fs.renameSync(files.image.path,imageName);
		imageResize(fields.width, fields.height, imageName, newName,res);
	})};app.listen('監(jiān)聽端口號(hào)');

form.parse(request, [callback]) 該方法會(huì)轉(zhuǎn)換請(qǐng)求中所包含的表單數(shù)據(jù)，callback會(huì)包含所有字段域和文件信息

文件上傳功能同樣是應(yīng)用formidable 模塊，當(dāng)然這里還應(yīng)用到其獲取POST數(shù)據(jù)的方法。formidable 模塊提供了獲取field參數(shù)的API form.on的field 事件，監(jiān)聽POST數(shù)據(jù)傳遞。所有的POST數(shù)據(jù)都需要應(yīng)用form.parse 進(jìn)行解析，解析返回fields對(duì)象和文件對(duì)象files。根據(jù)獲取的width和height,調(diào)用imageResize對(duì)圖片進(jìn)行相應(yīng)的壓縮處理。

然后去實(shí)現(xiàn)imageResize函數(shù)：imageResize函數(shù)的主要功能是應(yīng)用UDP模塊連接UDPServer,將相應(yīng)的參數(shù)數(shù)據(jù)轉(zhuǎn)化為json字符通過UDP協(xié)議傳遞到UDPServer,并將UDPServer響應(yīng)的數(shù)據(jù)通過res.render直接返回顯示到相應(yīng)的頁(yè)面

function imageResize(width,height,imagePath,newName,res){
	var imageJson={
		'width':width,
		'height':height,
		'url':imagePath,
		'new_name':newName	};
	var jsonStr=JSON.stringify(imageJson);
	var client=dgram.createSocket("udp4");
	var message=new Buffer(jsonStr);
	client.send(message,0,message.length,Server端監(jiān)聽的端口號(hào),"域名"，function(){
		client.on("message",function(msg,rinfo){
			var retJson=JSON.parse(msg);
			if(retJson.code===0){
				res.render(VIEW+'main.jade',{'url':pathName,'err':'ok'});
			}else{
				res.render(VIEW+'main.jade',{'url':'','err':'error'});
			}
		})
	})}

前端模板jade部分就先省去。。。

關(guān)于“Node+UDP實(shí)現(xiàn)圖片裁剪功能的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。