首页 > 代码库 > 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项目之图片的选择与上传