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依賴

angular.module('myApp',['ngCordova'])

6，在controller里添加$cordovaImagePicker模塊，引入imagePicker方法（返回的圖片地址是file:///data/data/包名/cache/pic.jpg）

 

 

.controller('TodoCtrl', function($scope,$cordovaImagePicker) {
 
  $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)