Ionic Hybrid App调用Camera+读取相册照片

前两天把开发环境搭建好了,但是Cordova是基于浏览器内核来渲染UI的(不知道这么说对不对,具体啥样也没去细弄),不管基不基于浏览器,基于App的功能设计总得有些需要解决的问题,下面列一列,一个一个去解决。

1 首先是授权登陆,服务端已经写好了rest api,授权是基于token认证的

2 第三方授权登陆

3 分享功能, 起码能分享到微信,微博,QQ吧。还在找插件中,没试。

4 Android检查版本更新,自动检查

5 拍照,选取照片,上传服务器

先开始解决Camera 相册 上传滴问题吧,相机效果怎么着也要像这样吧?

demo

第一创建个cameraDemo项目

ionic start cameraDemo tabs

安装3个插件

cordova plugin add cordova-plugin-camera # 调用相机的
cordova plugin add https://github.com/wymsee/cordova-imagePicker.git # 打开相册的
cordova plugin add cordova-plugin-file-transfer # 文件上传的

之后到http://ngcordova.com/这里下载ngcordova, 解压后把dist目录的ng-cordova.js 或者 ng-cordova.min.js 拷贝到项目的www/js目录。这是官方安装教程http://ngcordova.com/docs/install/

接着在index.html里引用

<script src="lib/ngCordova/dist/ng-cordova.js"></script> # 这是新添加,在cordova.js之前
<script src="cordova.js"></script>

修改www/js/app.js 引入ngCordova模块

demo

剩下的代码就不写了,看这里有具体的例子

http://ngcordova.com/docs/plugins/camera/

http://ngcordova.com/docs/plugins/imagePicker/

http://ngcordova.com/docs/plugins/fileTransfer/

最终结果就是这样

demo

虽然跟文章开始时最终效果差了些,但咱们开局是好的,文章开始时的效果应该需要相机的二次开发,所以路还很长,要学习的还很多呀。

不过网上看到了这个例子https://davidwalsh.name/browser-camera,应该可以用HTML5来定制相机界面,但是有很多局限性,像聚焦,前后摄像头,闪光灯开启关闭等等。。。我是没尝试,有愿意试的小伙伴希望给个反馈。。