本篇文章跟大家介紹一下Nodejs UDP實作圖片裁切功能的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《nodejs 教學》
說起來UDP，可能最吸引人的就是【UDP伺服器】了吧。
UDP伺服器可以用於一些特殊資料的（高效）傳輸，例如圖片、視訊和音訊資訊等
我見過一些大佬用UDP來和C server交互，主要目的是希望將PHP無法處理的邏輯業務，透過UDP伺服器傳送給其他server來處理。
所以，能不能有這樣一個需求：我們有兩個伺服器A、B，我們希望A處理所有的業務邏輯，而B只去做資料庫作業（例如更新）。
有多個設計想法可以解決上面的問題，最簡單的就是透過HTTP發送請求的方式，將A處理後的參數透過HTTP方式傳遞給B伺服器，然後B伺服器取得參數後更新資料庫。 —— 這種方式對於Node.js 來說非常簡單，但是HTTP是一個TCP協議，對於我們自己的兩台可信賴的伺服器，我們更希望使用UDP來傳送協議，避免TCP中不必要的資料傳輸。
接下來我們要介紹的一個應用，就是使用Node.js來處理圖片上傳切割(圖片處理)，並透過客戶端顯示所有的經過處理後的圖片列表，而這個功能也將應用UDP模組來實現。
應用程式分析
本應用程式包含兩個部分，一個是圖片上傳的網路服務功能模組、圖片處理後的頁面展示功能；另外一個則是圖片的處理，主要是圖片的切割保存。而作為用戶，希望是這樣的一個工具，上傳一個圖片，並指定其需要切割的長和寬，通過系統處理後返回給用戶一個切割好的圖片，並通過頁面返回展示。
根據以上的需求的分析，我們將上面的需求轉換為如圖4-5所示的系統運作流程圖。根據應用程式的分析，我們會設計兩個伺服器，一個是Web伺服器，另一個則是圖片處理伺服器，兩者透過UDP協定進行互動：
圖片上傳頁面，主要是圖片的上傳和預覽功能頁面;圖片展示頁面，展示透過圖片處理後返回的圖片; HTTP Web伺服器主要的作用是文件上傳和圖片展示;圖片處理伺服器，將Web伺服器的資料透過UDP協定傳遞給圖片處理伺服器，圖片處理伺服器做-定的處理後返回對應的資料到Web伺服器。
UDP Server端實作－ 圖片處理伺服器
根據上面的分析，本應用程式需要實作的3個功能模組分別是，UDP Server端、UDP Client端(Web Server) 和Jade頁面。
那麼首先我們從該應用的UDPServer端程式碼實作原理開始介紹(也就是圖片處理伺服器)。圖片處理伺服器作為UDP的server端，要應用UDP模組實作UDP server, 由於該UDP server依賴圖片處理工具,因此在UDP服務程式中會應用github中的一個開源Node.js圖片處理工具一node -imagemagick來輔助實現圖片處理功能。根據上面的分析，我們簡單設計出UDP Server的程式碼框架，程式碼如下:
const dgram=require('dgram'); //UDPconst server=dgram.createSocket("udp4");server.on("message",function(msg,rinfo){
//监听消息事件后处理})server.on("listening",function(){
var address=server.address();
console.log("server listening "+address.address+":"+address.port);})server.bind("监听端口号");登入後複製
會發現，UDP其實似乎跟socket.io差不多？都是採用的監聽訊息流機制。而http沒有這樣做，所以幾乎不用http去做這些高互動的事情 —— 這固然和他們的內部實現有關。
監聽完了，該做正事了：我們需要一個函數去處理圖片。這個函數的觸發時間要在事件流之後：
npm install imagemagick
登入後複製
需要注意的是，在使用該工具時，必須安裝imagemagick-cli系統工具軟體：sudo apt-get install imagemagick --fix -missing（否則會在運行期間拋出異常）
/**
url：图片源路径
width：图片压缩宽
height：图片压缩高
newName：图片处理后存储路径
**/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回調函數中調用：
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对象转为json字符串
var retStr=JSON.stringify(retJson);
//转为buffer对象，用于UDP传输
var message=new Buffer(retStr);
server.send(message,0,message.length,rinfo.port,rinfo.address);
})})登入後複製
server.on("message", callback(msg, rinfo))回呼函數中有msg和rinfo參數，其中msg為客戶端發送的訊息數據，而rinfo則為客戶端訊息，伺服器端根據客戶端資訊中的連接埠port和IP位址address， 應用server.send回應資料到客戶端即可。到這裡我們就實作了一個圖片處理的UDP伺服器，接下來介紹Web伺服器端是如何與其互動的。
UDP Client端 —— 前台服务器
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响应文件上传页面
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('监听端口号');登入後複製
form.parse(request, [callback]) 该方法会转换请求中所包含的表单数据，callback会包含所有字段域和文件信息
登入後複製
文件上传功能同样是应用formidable 模块，当然这里还应用到其获取POST数据的方法。formidable 模块提供了获取field参数的API form.on的field 事件，监听POST数据传递。所有的POST数据都需要应用form.parse 进行解析，解析返回fields对象和文件对象files。根据获取的width和height,调用imageResize对图片进行相应的压缩处理。
然后去实现imageResize函数：imageResize函数的主要功能是应用UDP模块连接UDPServer,将相应的参数数据转化为json字符通过UDP协议传递到UDPServer,并将UDPServer响应的数据通过res.render直接返回显示到相应的页面
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端监听的端口号,"域名"，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部分就先省去。。。
更多编程相关知识，请访问：编程视频！！
以上是Node+UDP實作圖片裁切功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
