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