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

时间: 2024-12-19 22:48:03

phonegap file api的相关文章

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访

HTML 5 File API:文件拖放上传功能

即将到来的 html5 规范有几个特性,以致使 HTML 远远超出其本身作为一种标记语言的能力,并为 Web 开发者提供了一些强大的脚本工具.负责监督 HTML5 发展进程的 W3C 组织,刚刚出版了一份强有力的规格草案 – HTML5 File API 接口功能. 该 API 的设计初衷,是改善基于浏览器的 Web 应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 <input type=”file”> 来处理文件上传. 更为惊喜的是,该 API 为开发者提供了

XMLHttpRequest file API

XMLHttpRequest file API Table of Contents FormData file API jquery file api 上传文件 从 FormData 中新建图片 设置进度条 大文件切割 一些 XMLHttpRequest 2 的 API 相关阅读 FormData 使用 FormData 不需要 setRequestHeader("content-type", "application/x-www-form-urlencoded")

js文件处理 File API

支持File API的浏览器有IE10+,Firefox3.5+,Opera10.6+,Safari5+,Chrome. 1.在表单元素上<input type="fiel" name="file" id="file" />,可以选择一个或多个文件,通过获取文件元素对象的集合files,来操作每一个对象files[i]: 用法:DOM操作 var files=document.getElementById("file&quo

File API 读取文件小结

简单地说,File API只规定怎样从硬盘上提取文件,然后交给在网页中运行的JavaScript代码. 与以往文件上传不一样,File API不是为了向服务器提交文件设计的. 关于File API不能做什么也非常值得注意.它不能修改文件,也不能创建新文件. 想保存任何数据,你可以通过Ajax把数据发送到服务器,或者把它保存在本地存储空间中. 取得文件 使用input元素.将其type属性设置为file,这样是最常见的标准上传文本框 隐藏的input元素.为了保证风格一致,可以把input元素隐藏

用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能 前几天做了一个项目,涉及到上传本地图片的功能,正好之前了解过 html5 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

通过Canvas及File API缩放并上传图片完整示例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>通过Canvas及File API缩放并上传图片</title> 5 <meta http-equiv="pragma" content="no-cache"> 6 <meta http-equiv="cache-control" content="no-cache&qu