app後端設計(12)--圖片的處理.docx

標籤：des   style   blog   http   io   ar   color   os   使用   

app上線後，不斷接受使用者的反饋，於是，反饋非常差的情況下，都會有app的改版。

 

一旦app的改版，都會有比較大的UI改動，一改動UI，那麼圖片的尺寸也就必須要改變。

 

在app後端設計(1)—api(http://blog.csdn.net/newjueqi/article/details/14053733)這篇文章中，我提到過app後台圖片處理的一個基本原則，資料庫中只儲存原圖的路徑。對於同一張圖片來說，針對不同機型，不同app版本所需要的不同尺寸，使用動態產生的策略，大體思路如下：

 

（1）      在圖片的url末尾加上參數，聲明需要產生的圖片的新的尺寸，例如：戶端需要圖片（http://www.baidu.com/img/bdlogo.gif）的80*80的尺寸，則在圖片的路徑加上寬和高的參數（類似於CDN的機制） http://www.baidu.com/img/bdlogo.gif？w=80&h=80

（2）      伺服器接收到圖片的請求，先在緩衝中尋找這個尺寸的圖片是否已經產生，如果已經在緩衝中有記錄，則不用重建。

（3）      如果該尺寸的圖片還沒產生，則產生新的圖片尺寸，並把新產生的圖片路徑放在緩衝中。

 

 

在app整個系統架構中，圖片應該有兩層緩衝：

（1）      app本地的圖片緩衝，當app中沒有該圖片時，才去服務取

（2）      伺服器的圖片緩衝，記錄圖片不同尺寸的儲存路徑

 

我的建議是，如果不差錢，直接使用七牛的雲端儲存的服務吧，雲端儲存不但可以加速圖片的下載上傳，也能實現圖片的大量操作。要知道，速度才是使用者體驗最直接的部分。

 

如果真的要自己實現圖片的裁切，那麼要考慮到圖片操作是非常消耗CPU，記憶體，和大量的磁碟IO，所以在選擇圖片處理工具要謹慎！！！

 

推薦使用GraphicsMagick，一個久經考驗的圖片處理軟體，支援多個平台，而且支援多種語言的客服端。GraphicsMagick是ImageMagick的一個分支，相對於ImageMagick而言，TA處理速度更快，消耗資源更少，並且大的圖片處理網站，如 Flickr and Etsy  已經在使用TA了。

 

使用GraphicsMagick時，最折騰的是怎麼配GraphicsMagick環境，查閱了大量的文章，都註明在linux下不能使用cmd.setSearchPath(path); ，但經過我實驗，是可以的，而且配了這個的話，可以讓linux和win下都運行同一段代碼，只要把path放在設定檔中就好了。

 

下面我寫的GraphicsMagick+Im4java圖片裁剪的工具類，

/** *  */package com.bmob.worker.image;import java.awt.image.BufferedImage;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;import java.io.InputStream;import java.util.concurrent.ExecutionException;/** */public class Image {/* 1、指定寬，高自適應，等比例縮放; 2、指定高， 寬自適應，等比例縮放; 3、指定最長邊，短邊自適應，等比例縮放; 4、指定最短邊，長邊自適應，等比例縮放; 5、指定最大寬高， 等比例縮放; 6、固定寬高， 置中裁剪） */public static int DefineWidth=1; public static int DefineHeight=2; public static int DefineLong=3; public static int DefineShort=4; public static int MaxWidthHeight=5; public static int DefineWidthHeight=6; /** * 圖片縮放的方法 *  * @param mode 1、指定寬，高自適應，等比例縮放; 2、指定高， 寬自適應，等比例縮放; 3、指定最長邊，短邊自適應，等比例縮放; 4、指定最短邊，長邊自適應，等比例縮放; 5、指定最大寬高， 等比例縮放; 6、固定寬高， 置中裁剪） * @param src 源檔案路徑 * @param desc 目標檔案路徑 * @param width 指定寬 * @param height 指定高 * @param maxFrame 指定最長邊 * @param minFrame 指定最短邊 * @return * @throws Exception */public  String resize(int mode, String src,String desc, int width, int height, int maxFrame, int minFrame) throws Exception {String str="";BHPApplication.init();// create commandConvertCmd cmd = this.getCmd();IMOperation op =null;if( mode==Image.DefineWidth ){op=this.resizeDefineWidth( src,desc, width, height);}else if( mode==Image.DefineHeight ){op=this.resizeDefineHeight( src,desc, width, height);}else if( mode==Image.DefineLong ){op=this.resizeDefineLong( src,desc, maxFrame);}else if( mode==Image.DefineShort ){op=this.resizeDefineShort( src,desc, minFrame);}else if( mode==Image.MaxWidthHeight ){op=this.resizeMaxWidthHeight( src,desc, width, height);}else if( mode==Image.DefineWidthHeight ){op=this.resizeDefineWidthHeight( src,desc, width, height);}cmd.run(op);return str;}//指定寬，高自適應，等比例縮放;public  IMOperation resizeDefineWidth(String src,String desc, int width, int height){IMOperation op = new IMOperation();op.addImage(src);op.resize(width,null);op.addImage(desc);return op;}//指定高， 寬自適應，等比例縮放;public  IMOperation resizeDefineHeight(String src,String desc, int width, int height){IMOperation op = new IMOperation();op.addImage(src);op.resize(null,height);op.addImage(desc);return op;}//指定最長邊，短邊自適應，等比例縮放;public  IMOperation resizeDefineLong(String src,String desc, int maxFrame) throws Exception{InputStream is = new FileInputStream(src);//通過檔案名稱讀取BufferedImage buff = ImageIO.read(is);int srcWidth=buff.getWidth();//得到圖片的寬度int srcHeight=buff.getHeight();  //得到圖片的高度is.close(); //關閉StreamIMOperation op = new IMOperation();op.addImage(src);if( srcWidth>srcHeight ){op.resize(maxFrame,null);}else{op.resize(null,maxFrame);}op.addImage(desc);return op;}//指定最短邊，長邊自適應，等比例縮放;public  IMOperation resizeDefineShort(String src,String desc, int minFrame) throws Exception {InputStream is = new FileInputStream(src);//通過檔案名稱讀取BufferedImage buff = ImageIO.read(is);int srcWidth=buff.getWidth();//得到圖片的寬度int srcHeight=buff.getHeight();  //得到圖片的高度is.close(); //關閉StreamIMOperation op = new IMOperation();op.addImage(src);if( srcWidth<srcHeight ){op.resize(minFrame,null);}else{op.resize(null,minFrame);}op.addImage(desc);return op;}//指定最大寬高， 等比例縮放;public  IMOperation resizeMaxWidthHeight(String src,String desc, int width, int height){IMOperation op = new IMOperation();op.addImage(src);op.resize(width,height,'!');op.addImage(desc);return op;}//固定寬高， 置中裁剪public  IMOperation resizeDefineWidthHeight(String src,String desc, int width, int height){IMOperation op = new IMOperation();op.addImage(src);op.gravity("center").extent(width, height);  op.addImage(desc);return op;}public  ConvertCmd getCmd(){ConvertCmd cmd = new ConvertCmd(true); //set true, use GraphicsMagickString path = "/usr/local/GraphicsMagick/bin"; //GraphicsMagick安裝路徑cmd.setSearchPath(path);return cmd;}}

建立了“app後端技術” 交流qq群：254659220 

[文章作者]曾健生

[作者郵箱][email protected]

[作者QQ]190678908

[新浪微博] @newjueqi

[部落格]http://blog.csdn.net/newjueqi

app後端設計(12)--圖片的處理.docx