首页 > 代码库 > ionic项目之图片的选择与上传
ionic项目之图片的选择与上传
由于ionic框架是基于angularJS的,开发hybrid app混合应用的,但angularJS本身没有太多对移动设备硬件的支持,所以找到两种方法解决这个问题!
一,ngCordova插件:ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用移动设备的功能,即可以在AngularJs代码中访问设备的Api
二,html5plus:最近比较火的一个东西,也是为了解决有关html5移动app去调用移动设备功能的问题,但最最要命的就是它和AngularJs是完全分离的,两家的,所以基于angularJS的项目用html5plus去调移动设备的功能会有很多问题!
一,主要参考文章 http://haomou.net/2015/01/07/2015_ionic_fileOP/
http://ngcordova.com/docs/plugins/
https://github.com/driftyco/ng-cordova
1,(在此之前配置好ionic环境,安装好cordova,bower等)命令行进入到ionic项目下,安装ngcordova
命令行:bowerinstall ngCordova
2,安装选择图片文件的插件
命令行:cordovapluginadd https://github.com/wymsee/cordova-imagePicker.git
3,安装文件上传的插件
命令行:cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
4,(安装完毕)修改index.xml文件(ng-cordova.js要放在cordova.js之前引入,它们两个要放在ionic或angular的js文件之后引用)
<scriptsrc="lib/ngCordova/dist/ng-cordova.js"></script>
<scriptsrc="cordova.js"></script>
5,注入ngCordova依赖
angular.module(‘myApp‘,[‘ngCordova‘])
6,在controller里添加$cordovaImagePicker模块,引入imagePicker方法(返回的图片地址是file:///data/data/包名/cache/pic.jpg)
.controller('TodoCtrl', function($scope,<span style="color:#ff0000;">$cordovaImagePicker</span>) { $scope.images_list = []; // "添加附件"Event $scope.addAttachment = function() { nonePopover(); $ionicActionSheet.show({ buttons: [ { text: '相机' }, { text: '图库' } ], cancelText: '关闭', cancel: function() { return true; }, buttonClicked: function(index) { switch (index){ case 0:appendByCamera(); break; case 1: <span style="color:#ff0000;">pickImage();</span> break; default: break; } return true; } }); } //image picker var pickImage = function () { var options = { maximumImagesCount: 1, width: 800, height: 800, quality: 80 }; $cordovaImagePicker.getPictures(options) .then(function (results) { $scope.images_list.push(results[0]); }, function (error) { // error getting photos }); } })
7,页面
<div class="list"> <div class="item" ng-repeat="img in images_list"> <img src=http://www.mamicode.com/"{{img}}" width="100%">>
总结:事实证明此方法效果比较完美,没什么问题,基于angularJS的项目选择ngCordova插件就对了
二,要想在自己的项目中用html5plus有两种方法(
1,Android离线打包(http://ask.dcloud.net.cn/article/38)(最后导出apk报错,没找到问题)
2,HBuilder新建html5plus项目,导入你工程的其他文件(导入我的ionic项目用到的文件)
我用的第二种方法
)1,获取图片的方法很简单(p是图片路径为本地图片的真实地址)
function appendByGallery() { plus.gallery.pick(function(p) { $scope.images_list.push(p) }); }
总结:由于angularJS有数据变化自动刷新的机制,所以当选择图片后回到主界面时,图片数组数据增加了,应该刷新图片界面但未刷新(不能显示新加的图片,必须点击部分部位才会刷新)(点击例如一些按钮,输入框后图片刷新出来,可能是由于用了html5plus后,破坏了angularJS的自动刷新的机制,点击按钮等又唤醒了它的机制,于是刷新)。
所以暂时基于angularJS的项目,用html5plus去调移动设备的功能会有问题!
感谢 http://haomou.net/2015/01/07/2015_ionic_fileOP/ 很多知识从此博主的文章中获得
(建议最好按照步骤安装,此博主的demo我运行到手机总是报错,未找到原因,我的ionic项目可以正常运行,所以ionic和cordova的环境应该没什么问题)
项目地址http://download.csdn.net/detail/superjunjin/8417273
原项目来自于http://rensanning.iteye.com/blog/2072034
此项目是基于cordova环境的(请提前安装好cordova)
命令行找到项目目录,运行项目到真机 cordova run android(或创建apk cordova run android)
ionic项目之图片的选择与上传