phonegap file api

標籤：android   style   blog   http   color   io   os   使用   java   

https://github.com/chrisben/imgcache.js/tree/master/examples

 

1.FILE API

file api最大的兩個功能是download和upload，download最常用的需求是把伺服器的圖片本地化到手機上，實現離線web app也可以瀏覽圖片的功能。upload可以實現把本地圖片上傳到伺服器的需求，如果項目涉及到發布圖片，修改頭像等需求，這個API就必須用到了

FileTransfer.download 經驗:

download伺服器的圖片相信很多人已經實現了，phonegap也有很完整的demo，但是對於已經download到手機上的圖片，怎麼再次從本地file取出來顯示，是最為關鍵的。首先我們要知道的是，img標籤也能顯示本地的圖片檔案，例如

<img class="border_img" src="http://www.mansonchor.com/images/img_loading.gif" data-original="file://xxxxx.jpg">

那麼只要我們可以獲得已download圖片的本地路徑就可以了。要想把圖片的伺服器路徑和本地路徑做成一一對應，辦法有很多，而我是使用md5 hash的方式。

具體流程是，當我想顯示一張伺服器圖片，例片地址是  http://www.mansonchor.com/image.jpg 時，我把 http://www.mansonchor.com/image.jpg做md5演算法，得出md5後的字串，然後在本地檔案夾裡尋找是否已經存在以這個md5串命名的圖片，假如有，證明之前這張圖片已經download到本地了，可以直接把這張圖片的本地路徑賦值給img的src顯示；假如沒有，證明這張圖片還沒被download到本地，就調用phonegap的FileTransfer.download介面把圖片下載到手機上，當然這張本地圖片的命名要以這個md5串一樣。

因為md5過的圖片地址，和本地的圖片檔案名稱是一一對應而且是唯一的，這樣我們就可以實現圖片本地化的需求了。

當然了，上面說的尋找本地檔案、download時自訂檔案名稱、擷取本地檔案的本地路徑，在phonegap中都有對應的方法。而md5演算法，javascript本身並沒有提供，需要自己寫或去網上搜一下現成的。

下面是我做圖片本地化的代碼

function local_the_img(img_url,img_obj,after_loaded){    self = this;     //處理開始    var img_url = img_url;    var img_obj = img_obj;     var url_md5 = md5(img_url);    //var file_name = url_md5.substr(-2,2);    var file_name = "cache_images";     window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, onError);     //檔案系統回呼函數    function onFSSuccess(fileSystem)    {      //取本機映像      fileSystem.root.getFile(file_name+"/"+url_md5+".jpg",null,      //如果有，直接拿出來顯示      function(FileEntry){         after_loaded.call(self,img_obj,FileEntry.toURI());        //$(img_obj).attr(‘src‘,FileEntry.toURI());      },      //無的話，下載落來再顯示      function(){           fileSystem.root.getDirectory(file_name,{create:true},gotDir,onError);      });    }     function gotDir(DATADIR)    {      var ft = new FileTransfer();      var dlPath = DATADIR.fullPath + "/" + url_md5 + ".jpg";       ft.download(img_url, dlPath,       function(e){             after_loaded.call(self,img_obj,e.fullPath);        //$(img_obj).attr(‘src‘,e.fullPath);      },       function(e){                 console.log("ERROR");        console.log(JSON.stringify(e));       });    }     function onError(e)    {      console.log("ERROR");      console.log(JSON.stringify(e));    }   }

說明一下，getDirectory方法裡面{create:true}這個參數必須要傳，作用是在本地找不到這個檔案時，自動建立這個檔案，在android裡面download的圖片不能直接建立檔案，必須先建立了再寫入。after_loaded是回調方法，把獲得的本地圖片路徑和對應的img對象作參數回調，方便外層調用。

FileTransfer.upload 經驗:

var options = new FileUploadOptions();options.fileKey="file";options.fileName=fileURI.substr(fileURI.lastIndexOf(‘/‘)+1);options.mimeType="text/plain"; var params = new Object();params.value1 = "test";params.value2 = "param"; options.params = params; var ft = new FileTransfer();ft.upload(fileURI, "http://some.server.com/upload.php", win, fail, options);

在phonegap的demo裡，前端代碼已經很清楚，就不多說了，但是它卻沒有提供upload.php的demo，很多人都不清楚圖片到底是用什麼方式提交的。

其實upload介面的圖片提交，就和我們平常用form去提交的方式是一樣的，還是不具體？看代碼吧

<form action="http://some.server.com/upload.php" method="post">    <input type="file" name="file">    <input type="hidden" name="value1" value="test">    <input type="hidden" name="value2" value="param"></form>

就是說上面phonegap的代碼，和下面form的html代碼提交到upload.php的效果，是一摸一樣的。我還特意用抓包軟體看了下，其實phonegap的FileTransfer.upload 就是完全類比一個POST的請求。

至於伺服器端怎麼處理圖片的上傳，那就需要自己去部署了。

2. Camera API

camera api就是能讓你調用原生網路攝影機或者調用本地的相簿來擷取圖片，這個API一般配合著FileTransfer.upload來使用。建議盡量使用FILE_URI而不是DATA_URL的返回方式，因為DATA_URL是一個相當龐大的base64字串，對於高像素的手機，高品質圖片的DATA_URL很有可能讓你的app閃退。

用FILE_URI返回的圖片，在upload時很多時候會有圖片方向的問題，明明我是直立的照片，上傳到伺服器之後會變成打橫的了，這個問題困擾了我很久，最後發現是由於圖片的exif引起的。（exif是什嗎？）

exif其中有一個屬性記錄了圖片的旋轉角度，在伺服器你可以擷取上傳的這張圖片的exif，再根據這個屬性來進行方向的調整。

PHP裡可以使用exif_read_data函數來擷取圖片的exif

$img_info = exif_read_data( $source , ANY_TAG  );switch( $img_info[‘Orientation‘] ){    case 6:      $r = 270;      break;                             case 3:      $r = 180;      break;                             case 8:      $r = 90;      break;                             default:      $r = 0;}

如果你不想在伺服器上做過多的處理，也有一個快捷的辦法，就是在調用camera api時，加上correctOrientation參數，加上這個參數後，phonegap會自動在本地幫你調整，不過這個參數只有在phonegap 1.7版才支援，而且只針對iphone有效。

另外還有個問題就是quality千萬不要設得太高，phonegap上建議iphone把quality調到50以下，但是我在用4S調試時，就算把quality調到20，都經常會閃退，升級到phonegap 1.7之後情況有改善，但是有時app運行久了照相還是會閃退，相信是phonegap對記憶體的控製做得還是不夠好。

等以後對其它api有更多經驗時，再發文補充

 

引自：http://www.mansonchor.com/blog/blog_detail_63.html

phonegap file api