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
phonegap file api的更多相关文章
- HTML5的File API读取文件信息
html结构: <div id="fileImage"></div> <input type="file" value=" ...
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...
- File API 读取文件小结
简单地说,File API只规定怎样从硬盘上提取文件,然后交给在网页中运行的JavaScript代码. 与以往文件上传不一样,File API不是为了向服务器提交文件设计的. 关于File API不能 ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- File API 读取上传的文件
1, 在html 文档中,<input type="file"> 我们可以选择文件进行上传,但这时只能上传一个文件.如果加上multiple 属性,可以上传多个文件,上 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 使用 JavaScript File API 实现文件上传
概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...
- 通过Canvas及File API缩放并上传图片完整示例
<!DOCTYPE html> <html> <head> <title>通过Canvas及File API缩放并上传图片</title> ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- EFM8单片机与I2C外设通信
近期帮同学做一个项目,开发板是EFM8单片机,支持SPI和I2C协议(SMBus).非常久没搞过单片机了,并且条件限制,为了使单片机和外设成功通信.花了一个星期时间.刚開始使用SPI.发现代码逻辑都没 ...
- opencv模块介绍
opencv主要模块介绍: [calib3d]——其实就是就是Calibration(校准)加3D这两个词的组合缩写.这个模块主要是相机校准和三维重建相关的内容.基本的多视角几何算法,单个立体摄像头标 ...
- Django学习之URLconf
Django处理request的步骤: 1.确定根URLconf 2.载入urls.py,找到变量urlpatterns,urlpatterns是django.conf.urls.url()的实例对象 ...
- C#虚方法、抽象类、方法重写
Timer.每隔一段时间触发一个事件.不可视控件.Interval.Enabled.Tick事件.计量单位:ms(毫秒). 1秒=1000毫秒.取当前时间 DateTime.Now.ToSt ...
- Play on Words UVA - 10129 欧拉路径
关于欧拉回路和欧拉路径 定义:欧拉回路:每条边恰好只走一次,并能回到出发点的路径欧拉路径:经过每一条边一次,但是不要求回到起始点 ①首先看欧拉回路存在性的判定: 一.无向图每个顶点的度数都是偶数,则存 ...
- MacOS 自带文件编码格式转换工具
[命令功能]iconv 是Linux操作系统用于将文本编码格式从一种转外另外一种的工具命令.[使用方法] iconv [OPTION...] [-f ENCODING] [-t ENCODING] [ ...
- Windows之建立C++开发环境
下载:https://yun.baidu.com/s/1pK7j4Fp 解压得到 把myMingw文件夹复制系统根目录下. 添加C:\myMingw\bin到系统环境变量 双击make-3.81.ex ...
- Mybatis学习手记(一)
年近不惑,为生活所迫,重新开始学习JAVA,计划将公司的开发平台统一到JAVA上来.现公司的技术杂乱,有PB开发的程序要维护.有PYTHON的程序要维护,有.NET的,也有JAVA的,非常不容易形成合 ...
- mac与phy怎样实现网络自适应
这两天改动网卡驱动以实现10/100/1000M自适应,因此研究了下phy芯片和emac驱动怎样兼容10/100/1000M网络环境,记录在此. 网络中设备端数据链路层由mac芯片和phy芯片组成.p ...
- 视觉SLAM之词袋(bag of words) 模型与K-means聚类算法浅析(2)
聚类概念: 聚类:简单地说就是把相似的东西分到一组.同 Classification (分类)不同,分类应属于监督学习.而在聚类的时候,我们并不关心某一类是什么,我们需要实现的目标只是把相似的东西聚到 ...