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

命令行: bower install ngCordova

2，安装选择图片文件的插件

命令行: cordova plugin add 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依赖

module

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="{{img}}" width="100%">
      </div>
    </div>

总结：事实证明此方法效果比较完美，没什么问题，基于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)