phonegap file api

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

 

http://stackoverflow.com/questions/21941731/cordova-phonegap-open-downloaded-file-inappbrowser